Bootstrap


开篇废话是一种情怀

  • 上一篇说到Less预处理语言,这节就着重讲下Bootstrap框架,这款框架应该是现在前端人手必备,就是那么的好用.不管是兼容性还是组建,都是无可挑剔的
  • Bootstrap这种东西一定要学会,不然在前端开发中,你就好像是少了一只脚一样,现阶段我们只有拿来主义,先去用它,然后再慢慢的一点点的去研究它,超越它
  • 好处就是生态圈火,不断地更新迭代,提供一套美观大方地界面组件,提供一套优雅的 HTML+CSS 编码规范,让我们的 Web 开发更简单,更快捷;
  • 注意点就是使用Bootstrap 并不代表不用写 CSS 样式,而是不用写绝大多数大家都会用到的样式

下载Bootstrap

下载3.3.6链接:
https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip

下载4.0链接:
https://github.com/twbs/bootstrap/releases/download/v4.0.0-alpha.2/bootstrap-4.0.0-alpha.2-dist.zip

在线自定义

  • 官网在线
  • 中文网在线

源码编译 --- LESS语言

  • 官方文档
  • 中文文档

搭建 Bootstrap 页面骨架及项目目录结构

├─ /project file/ ··················· 项目所在目录
└─┬─ /css/ ······················· 我们自己的CSS文件
  ├─ /font/ ······················ 使用到的字体文件
  ├─ /img/ ······················· 使用到的图片文件
  ├─ /js/ ························ 自己写的JS脚步
  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】
  ├─ /favicon.ico ················ 站点图标
  └─ /index.html ················· 入口文件

约定编码规范

HTML约定

  • 所有的CSS引用在HEAD中,按照第三方优先的顺序排列,我们自己的CSS肯定在最下面
  • 所有JS文件都引用在Body的最下面(加载的缘由),按照依赖顺序排序
  • 如果只是使用bootstrap的样式的话,就不用引用js文件
  • 在head中引入必要的CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖
  • 在body末尾引入必要的JS文件,优先引用第三方的JS,注意JS文件之间的依赖关系,比如bootstrap.js依赖jQuery,那就应该先引用jquery.js 然后引用bootstrap.js

CSS约定

  • 除了公共级别样式,其余样式全部由 模块前缀
  • 尽量使用 直接子代选择器, 少用间接子代 避免错杀
  • CSS类名冲突 通过约定 给模块加上一个独一无二的名字
  • 使用子代选择器的方式

JS约定

  • 不允许使用onxxx = function(){}的方式注册事件
  • 原生JS统一使用addEventListener('xxx', function(){});

HTML5文档结构

  • 示例代码 :



  
  页面标题


  


视口Viewport设置

  • ** 示例代码 : **

1.html中插入视口设置,可以通过emmet meta:vp插入
2.此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)

** 3.960px 内容 被套在一个宽度为980px(绝大多数设备的视口默认尺寸)的容器(视口)中,将视口缩放到414px的设备中展示
4.width:视口的宽度
5.initial-scale:初始化缩放
6.user-scalable:是否允许用户自行缩放(值:yes/no; 1/0)
7.minimum-scale:最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
8.maximum-scale:最大缩放**

浏览器兼容模式

  • ** 示例代码 : **

html中插入兼容模式设置,可以通过emmet meta:compat插入
此属性为文档兼容模式声明,表示如果在IE浏览器下则使用最新的标准渲染当前文档

站点图标 favicon

  • ** 示例代码 : **

html中插入图标链接,可以通过emmet link:favicon插入

引入相应的第三方文件

  • 示例代码 :


...



在我们默认的样式表中将默认字体设置为:

  • 示例代码 :
body{
  font-family: "Helvetica Neue", 
                Helvetica, 
                Microsoft Yahei, 
                Hiragino Sans GB, 
                WenQuanYi Micro Hei, 
                sans-serif;
}

版心container类

  • 定义一个固定宽度且居中的版心
  • container是具备响应式的能力
  • 四个档位 1170 - 970 - 750 - 100%

栅格系统 ----> 核心部分

  • Bootstrap中的栅格系统就是将一行划分为12列
  • 我们通过col--的类名控制某个元素在某种屏幕的情况下展示几列**
  • col-md-6 在中等屏幕下 占1/2
  • col-xs-12 在超小屏幕下 占全部

行排列 ----> row

  • .row{ ml:-15px; mr:-15px }
  • 抵消掉container中定义的padding

列排列 ----> col-*-*类

  • 在某种屏幕尺寸下控制列的占比

1.col-xs-[列数]:在超小屏幕下展示几份
2.col-sm-[列数]:在小屏幕下展示几份
3.col-md-[列数]:在中等屏幕下展示几份
4.col-lg-[列数]:在大屏幕下展示几份
5.xs : 超小屏幕 手机 (<768px)
6.sm : 小屏幕 平板 (≥768px)
7.md : 中等屏幕 桌面显示器 (≥992px)
8.lg: 大屏幕 大桌面显示器 (≥1200px)

字体图标

  • 字体实际上就是记录一个字符对应的图形
  • 在CSS中为元素设置字体,以前只能设置客户端存在的字体
  • webfont 在线字体
  • 自己做一套图形的字体,可以使用icomoon进行制作.
  • 如何定义一个web字体
  • ** 示例代码 : **
/* 定义一个叫做“xxx”字体 */
@font-face {
  font-family: 'xxx';
  src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), 
  url('../font/MiFie-Web-Font.svg') format('svg'), 
  url('../font/MiFie-Web-Font.ttf') format('truetype'), 
  url('../font/MiFie-Web-Font.woff') format('woff');
}

字体文件格式

  • eot : embedded-opentype
  • svg : svg
  • ttf : truetype
  • woff : woff

字体文件格式

  • eot : embedded-opentype
  • svg : svg
  • ttf : truetype
  • woff : woff

自定义按钮样式生成

  • 链接 : http://blog.koalite.com/bbg/
  • 可以通过界面生成一个新的按钮样式
.btn-xxx{
  color: #ffffff;
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-xmg:hover,
.btn-xmg:focus,
.btn-xmg:active,
.btn-xmg.active,
.open .dropdown-toggle.btn-xmg {
  color: #ffffff;
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-xmg:active,
.btn-xmg.active,
.open .dropdown-toggle.btn-xmg {
  background-image: none;
}

.btn-xmg.disabled,
.btn-xmg[disabled],
fieldset[disabled] .btn-xmg,
.btn-xmg.disabled:hover,
.btn-xmg[disabled]:hover,
fieldset[disabled] .btn-xmg:hover,
.btn-xmg.disabled:focus,
.btn-xmg[disabled]:focus,
fieldset[disabled] .btn-xmg:focus,
.btn-xmg.disabled:active,
.btn-xmg[disabled]:active,
fieldset[disabled] .btn-xmg:active,
.btn-xmg.disabled.active,
.btn-xmg[disabled].active,
fieldset[disabled] .btn-xmg.active {
  background-color: #E92322;
  border-color: #DB3B43;
}

.btn-xmg .badge {
  color: #E92322;
  background-color: #ffffff;
}

3.5小屏幕隐藏

  • 示例代码 :

||

  • __hidden-xx : 在某种屏幕下隐藏 __
  • visible-xx-xxx : 在某种屏幕尺寸下显示
  • visible-md-xx:指的是中等屏幕可见,不是中等屏幕以上
  • visible-md-block visible-lg-block == hidden-sm hidden-xs

自己实现一套相同的工具类

  • 根据hidden-xxx和visible-xxx的特点,通过媒体查询的方式
  • 示例代码 :
@media (max-width:768px) {
  /*-xs*/
  .hidden-xs {
    display: none;
  }
  .visible-xs-block {
    display: block;
  }
  .visible-xs-inline {
    display: inline;
  }
  .visible-xs-inline-block {
    display: inline-block;
  }
}

@media (max-width:992px) {
  /*-sm*/
  .hidden-sm {
    display: none;
  }
  .visible-sm-block {
    display: block;
  }
  .visible-sm-inline {
    display: inline;
  }
  .visible-sm-inline-block {
    display: inline-block;
  }
}

@media (max-width:1200px) {
  /*-md*/
  .hidden-md {
    display: none;
  }
  .visible-md-block {
    display: block;
  }
  .visible-md-inline {
    display: inline;
  }
  .visible-md-inline-block {
    display: inline-block;
  }
}

@media (min-width:1200px) {
  /*-lg*/
  .hidden-lg {
    display: none;
  }
  .visible-lg-block {
    display: block;
  }
  .visible-lg-inline {
    display: inline;
  }
  .visible-lg-inline-block {
    display: inline-block;
  }
}

使用一个第三方的jquery插件步骤

  • 下载包
  • 引用jquery
  • 引用包
  • 编写特定的HTML结构
  • 自己写一段JS调用一下这个插件
  • Bootstrap框架中的所有JS组件都依赖于jQuery实现
  • 现在市面上很多插件的调用方式是不需要自己写JS
  • 其实这些插件都会根据HTML的特殊点自动执行

4.导航通栏

  • 在使用了boostrap过后,大多数界面元素都是通过bootstrap提供好的界面组件修改得来

Bootstrap扩展

  • 通过bootstrap文档对导航条样式的设置发现,其实本身是有一个类似于主题的概念
  • navbar-default:默认的外观
  • navbar-inverse:暗色背景的样式
  • 所以我们希望可以通过自定义一套完整的风格(继承navbar-default):
  • navbar-xxx
  • 示例代码 :
.navbar-xxx{
  ...
}
具体代码参考官网navbar-default实现即可

菜单行高调整

  • 默认样式中菜单的行高为20px,我们可以调整为自己想要的高度
  • 一般都是通过自己的样式去覆盖

响应式菜单

  • 默认菜单是不具备响应式的能力的,通过观察文档发现,响应式菜单是通过一个按钮控制的
  • 示例代码 :

轮播图

Bootstrap JS插件使用
  • 对于Bootstrap的JS插件
  • 我们只需要将文档实例中的代码粘到我们自己的代码中
  • 让后作出相应的样式调整

Bootstrap中轮播图插件叫作Carousel

基本的轮播图实现

  • 示例代码 :


由于轮播图片超宽造成的影响

  • 一个超宽的图片在容器中居中显示:
  • position方式
  • background方式 通过背景图的定位方式
  • 美工为了在不同屏幕下更好地展示将图片两边做的非常宽,但是我们大多数情况的页面宽度都无法满足这样的图片宽度
  • 而且Bootstrap的样式中默认将图片的max-width设置为100%;
  • 造成界面图片缩放
  • 想在一个较小屏幕下展示一个超宽的图片,并让图片居中显示

三种办法:
1.换用背景图的方式,background-position: center center;
2.使img元素绝对定位,left:50%,margin-left: -width/2
3.translate方式

background使用

  • 将容器的高度固定(比如 : 410px)
  • 将轮播图改为背景显示
  • 由于可能图片的高度不一定是410px
  • 所以需要设置css3中的background-size

background-size

  • length
    如 background-size: 100px 100px,将背景图固定到多大尺寸
  • percentage
    如 background-size: 90% 90%,以百分比的形式设置背景大小
  • cover

1.背景图片等比例缩放
2.让背景图相对较小边放大到目标容器大小结束
3.如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
4.因为背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*600

  • contain

1.背景图片等比例缩放
2.让背景图相对较大边放大到目标容器大小结束
3.如:一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是200*400
4.因为背景图的较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200*400

图片响应式

  • 各种终端都需要正常显示图片
  • 移动端应该使用更小(体积)的图片
  • 实现方式

1.将元素中直接设置的图片背景删除,换成两个data-属性(如:data-img-sm="小图路径",data-img-lg="大图路径")
2.通过JS的方式获取屏幕的宽度;
3.判断屏幕宽度是否小于一定的值(如:768)
4.根据判断情况决定使用具体的大图还是小图

  • 示例代码 :
// 获取屏幕宽度
var windowWidth = $(window).width();
// 判断屏幕属于大还是小
var isSmallScreen = windowWidth < 768;
// 根据大小为界面上的每一张轮播图设置背景
// $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组(多个元素)
$('#main_ad > .carousel-inner > .item').each(function(i, item) {
  // 因为拿到是DOM对象 需要转换
  var $item = $(item);
  // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');
  var imgSrc =
    isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');

  // 设置背景图片
  $item.css('backgroundImage', 'url("' + imgSrc + '")');
});

window resize事件

  • 由于上一步我们实现的过程是指在页面加载完成判断一次,
  • 当用户手动调整页面宽度过后没有及时发生变化,
  • 所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题
  • 示例代码 :
function 窗口变化后执行的函数名(){
  // 具体的操作
}
$(window).on('resize', 窗口变化后执行的函数名);
  • 这个事件只会在窗口尺寸发生变化后执行,但是我们需要一开始时执行一次
  • 示例代码 :
...
$(window).on('resize', 窗口变化后执行的函数名).trigger('resize');

小图片不需要使用背景的方式

  • 小图如果还是使用背景的方式,当屏幕特别小时,效果很差
  • 所以当使用小图时,改用img的方式
  • 示例代码 :
// 因为我们需要小图时 尺寸等比例变化,所以小图时我们使用img方式
if (isSmallScreen) {
  $item.html('![](' + imgSrc + ')');
} else {
  $item.empty();
}
  • 按照目前的情况,如果是小图展示则不需要给容器加上410px的固定高度
  • 所以我们可以通过CSS媒体查询的方式解决
  • 示例代码 :
#main_ad > .carousel-inner > .item {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
@media (min-width: 768px) {
  #main_ad > .carousel-inner > .item {
    height: 410px;
  }
}
#main_ad > .carousel-inner > .item > img {
  width: 100%;
}

响应式辅助类型

  • 整个板块在超小屏幕下是隐藏起来的
  • 只需要给当前板块加上hidden-xs的class

预置界面组件

  • 导航
  • 导航条
  • 面包屑导航
  • 下拉菜单
  • 按钮式下拉菜单
  • 按钮组
  • 输入框组
  • 警告框
  • 页头
  • 分页
  • 列表组
  • 面板
  • 媒体对象
  • 进度条
  • Glyphicons
  • 标签
  • 徽章
  • 缩略图
  • 大屏幕
  • 嵌入内容
  • 内嵌

JavaScript插件 -- 内置组件

  • 模态对话框
  • 下拉菜单
  • 滚动监听
  • 标签页
  • 工具提示
  • 弹出框
  • 警告框
  • 按钮
  • 折叠面板
  • 轮播图
  • 吸顶效果
  • data-spy="affix"
  • data-offset-top="什么位置出现"
  • data-offset-bottom="什么位置消失"
大致应用就是这样子的一个流程和方式,这些东西掌握,举一反三就会明白其他的一些东西,当然,如果后期发现什么好玩的,再来补充添加

你可能感兴趣的:(Bootstrap)