本文共 9465 字，大约阅读时间需要 31 分钟。

一、认识Bootstrap(BS)

1、官网：https://www.bootcss.com/ (https://v3.bootcss.com)

2、BS是一个入门级UI框架，汇集了HTML、CSS（less）（布局）和JavaScript（插件）的一个框架。

3、BS不是所有项目都适合使用BS实现布局，如果UI工程师没有按照BS的栅格系统理念去设计UI图，因为BS不适合做固定宽高的网页。

BS一般用于开发没有UI图的项目，且为响应式的项目。

4、BS3和BS4的区别：

BS3有4种栅格，而BS4有5种栅格； BS4全面引入ES6，新增了网格层适配移动端，CSS文件减少了40%以上，并且所有文档都采用了Markdown编辑器编写； BS4引入了弹性盒子等。

5、BS4中文文档

逐浪CMS团队翻译的中文使用手册：https://code.z01.com/v4/

6、Boostrap是Twitter公司开发，2010年6月发布的。

7、BS核心开发成员马克.奥托和雅各布·桑顿。

8、Bootstrap主要特色

1）由匠人造，为匠人用 2）简单易学 3）*跨设备、跨浏览器 4）*提供12列栅格布局 5）*支持响应式设计 6）样式化的文档 7）不断完善的代码库 8）*可定制的jQuery插件 9）支持HTML5 10）支持CSS3 11）提供开源代码 12）由Twitter制造

9、Bootstrap主要功能

1）栅格系统 2）布局 3）字体样式 4）多媒体展现 5）表单 6）导航等 7）JavaScript插件

10.使用BS方法

（1）本地引入（必须先下载）

a.引入bootstrap.css或bootstrap.min.css

b.引入JS（如果不使用插件，不需要引入JS）bootstrap.js或bootstrap.min.js。

注意：bootstrap.js依赖于jquery.js，在引入它之前必须先引入jquery.js。

（2）CDN引入（不需要下载）（推荐使用这种方法引入）(https://bootcss.cn)

a.引入CSS

b.引入JS

二、框架解析

1、必须使用HTML5文档类型

2、移动设备优先

移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。

meta viewport 有6个属性：

3、布局容器

（1）.container（固定布局） （2）.container-fluid（流式布局）

可以把他们放在一起共同对比一下：

    
       
           
   
   
    
    
viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。        手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中        （这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。    
   
   
    
    
viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。        手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中        （这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。    
   

可以看到，使用container布局时，文字距离左右两边都有边距，而container-fluid没有，但当网页屏幕宽度缩小时，效果却不是那么明显了

三、栅格系统

栅格系统（Grid System），也称网格系统，是一种平面设计的方法和设计风格。它运用固定的格子设计版面

布局，其风格工整简洁，很受平面设计师的欢迎，已成为今日出版物设计的主流风格之一。在网页设计中，有人参 考传统栅格系统的设计方法，以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。 其中主要的效果在于，它将一行分为了12列来操作

1、四种栅格布局

首先需要了解的是一下四中布局

(1)手机端：.col-xs-* （屏宽768px以下）

(2)平板电脑端：col-sm-* （屏宽768px-992px之间）版心最大宽度750px (3)中型PC端：.col-md-* （屏宽992px-1200px之间）版心最大宽度970px (4)大型PC端：.col-lg-* （屏宽1200px以上）版心最大宽度1170px

2、布局方式：

   
      或container-fluid    
    
        
     
           .col-xs-*/.col-sm-*/.col-md-*/.col-lg-*            ...        
     
    
    
   

    
           
       
   
    
        
    
        
     
      hello
     
        
     
      hello
     
        
     
      hello
     
    
    
    
        
    
        
     
      hello
     
        
     
      hello
     
        
     
      hello
     
        
     
      hello
     
    
    
    
        
    
        
     
      hello
     
        
     
      hello
     
    
    
    
        
    
        
     
      hello
     
        
     
      hello
     
        
     
      hello
     
    
    
   

此处要特别注意：多余的列会自动另起一行，其实可以看到，col-xs-3后面的这个数字只要相加等于12就可以在同一行上。

3、列偏移

.col-xs-offset-* .col-sm-offset-* .col-md-offset-* .col-lg-offset-* 假设此时，我们需要一个5栏布局且要居中，而5栏却无法等分12，此时就可以用到列偏移

首先看一下不加列偏移的效果

   
        
    
     hello
    
        
    
     hello
    
        
    
     hello
    
        
    
     hello
    
        
    
     hello
    
    
   

加了列偏移的效果：

   
        
    
     hello
    
        
    
     hello
    
        
    
     hello
    
        
    
     hello
    
        
    
     hello
    
    
   

4、列嵌套 每一行分为12列，其实是可以无穷分解下去。比如一米长的绳子，先分成12段，每一单独的段其实还可以再次分成12段，以此类推

   
        
    
            
     
                
      
       hello1
      
                
      
       hello1
      
                
      
       hello1
      
            
     
        
    
        
    
            
     
                
      
       hello2
      
                
      
       hello2
      
                
      
       hello2
      
                
      
       hello2
      
            
     
        
    
    
   

5、列排序 .col-xs-push-* .col-xs-pull-* .col-sm-push-* .col-sm-pull-* .col-md-push-* .col-md-pull-* .col-lg-push-* .col-lg-pull-* 顾名思义可以改变列的顺序

   
    
    
     hello1
    
    
    
     hello2
    
    
    
     hello3
    
   

6、响应式布局 响应式Web设计是一种技术，它可以使网站适应于不同设备，这些设备可以是智能手机、平板电脑、电视机、 PC显示器、iPhone和Android手机，包括横向、纵向的屏幕，开发人员只需要正确地实现响应式Web设计，网站 就可以很好地适合各种设备。

a.图片响应式

.img-responsive b.隐藏响应式 .hidden-xs .hidden-sm .hidden-md .hidden-lg c.字体响应式 用媒体查询实现。

此实例可以在测试中调整页面宽度来比较

  
       
   
   
   
  
    
    
     
      内容1
     
    
     
      内容2
     
    
     
      内容3
     
    
     
      
     
  
    
   

  
       
     
   
  
    
    
     
      
      
        
       
菜单项1
        
       
菜单项2
        
       
菜单项3
        
       
菜单项4
        
       
菜单项5
      
      
    
     
  
    
   

以上代码都需要自己去实现看看效果，在这里不做展示。

四、全局CSS样式

（一）标题

  
       
   
标题1 附标题
标题2
标题3
标题4
标题5
标题6

（二）页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 21.428。这些属性直接赋予body元素和所有段

落元素。另外，p（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。 中心内容通过添加 .lead 类可以让段落突出显示。

  
       
     
这是页面主体部分
  Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予body元素和所有段落  元素。另外，p（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。  
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予body元素和所有段落    元素。另外，p（段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

（三）内联文本元素以及样式

1、元素

（1） mark：标记 （2） del：删除 （3） s：不可用（删除） （4） ins：插入（下划线） （5） u：下划线 （6） small：小型字号 （7） strong：加粗（强调） （8） em：顷斜 （9） abbr：缩略语 （10） address：地址 （11） blockquote：引用 （12） ul：无序列表 （13） ol：有序列表 （14） dl：自定义列表

2、样式

（1）.text-left：左对齐 （2）.text-center：居中 （3）.text-right：右对齐 （4）.text-justify：两端对齐（分散对齐） （5）.text-nowrap：不换行 （6）.text-lowercase：小写 （7）.text-uppercase：大写 （8）.text-capitalize：首字母大写

  
       
     
   
内联文本元素及类
   
内联文本元素及类
   
内联文本元素及类
   
内联文本元素及类
   
内联文本元素及类
   
内联文本元素及类
   
内联文本元素及类
   
内联文本元素及类
   缩略语
   
  
家庭住址：543235643
  
联系方式：13885004855
   
这是一个
   
    段落
   
   
   
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
   
   
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
   
   
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
   
   
   
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
  
    
dlfjdjfldkf
   
   
   
  
    
     HTML5
    
  
    
     HTML5是开发网站必备的一种标记语言。
    
   
   
   
   
   
   
   
  
    
    
     
      
HTML5是开发网站必备的一种标记语言。
     
    
     
      
HTML5是开发网站必备的一种标记语言。
     
    
     
      
HTML5是开发网站必备的一种标记语言。
     
    
     
      
HTML5是开发网站必备的，一种标记语言。
     
    
     
      
HTML5是开发网站必备的一种标记语言。
     
  
    
   
   
   
   
lowercase
uppercase
capitalize

可以挨个操作一下

（四）代码

1、code：代码

2、kbd：键盘输入 3、pre：代码块 4、var：变量 5、samp：程序输出

  
       
   
   
这是一段代码：var x;x=100;console.log(x);
   
在WebStorm中，格式化代码的快捷键是：Ctrl+Alt+Shift+L
   
这是一段代码：
var x;
x=100;
console.log(x);
   
   
x2+y2=z
   This text is meant to be treated as sample output from a computer program.

（五）表格

.table:基本表格

.table-striped:条纹状表格 .table-bordered:带边框的表格 .table-hover:带鼠标悬停的表格 .table-condensed:紧缩表格 .table-responsive:响应式表格

表格状态（颜色配置）：

.active .success .info .warning .danger

  
       
   
   
   
      
     
          
列表头内容1
          
列表头内容2
          
列表头内容3
          
列表头内容4
       
       
          
行表头内容1
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容2
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容3
          
内容1
          
内容2
          
内容3
       
    
   
   
   
      
     
          
列表头内容1
          
列表头内容2
          
列表头内容3
          
列表头内容4
       
       
          
行表头内容1
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容2
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容3
          
内容1
          
内容2
          
内容3
       
    
   
   
   
      
     
          
列表头内容1
          
列表头内容2
          
列表头内容3
          
列表头内容4
       
       
          
行表头内容1
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容2
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容3
          
内容1
          
内容2
          
内容3
       
    
   
   
   
      
     
          
列表头内容1
          
列表头内容2
          
列表头内容3
          
列表头内容4
       
       
          
行表头内容1
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容2
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容3
          
内容1
          
内容2
          
内容3
       
    
   
   
   
      
     
          
列表头内容1
          
列表头内容2
          
列表头内容3
          
列表头内容4
       
       
          
行表头内容1
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容2
          
内容1
          
内容2
          
内容3
       
       
          
行表头内容3
          
内容1
          
内容2
          
内容3
       
    
   
   
   
  
    
         
      
             
列表头内容1
             
列表头内容2
             
列表头内容3
             
列表头内容4
          
          
             
行表头内容1
             
内容1
             
内容2
             
内容3
          
          
             
行表头内容2
             
内容1
             
内容2
             
内容3
          
          
             
行表头内容3
             
内容1
             
内容2
             
内容3
          
       
    
   

（六）表单

.form-group:组件编组

.form-control:响应式组件 .form-inline:内联表单 .form-horizontal:水平排列的表单

  
       
   
   
  
    
    
     用户名：
         
     账号：
       
    
   
   
  
    
    
     用户名：
         
     账号：
       
    
   

表单中支持的输入类组件：

text、password、datetime、datetime-local、date、month、time、 week、number、email、url、search、tel、color 其它组件： textarea radio checkbox select

（七）图片

1、.img-responsive:响应式图片 2、.img-rounded:圆角 3、.img-circle:圆 4、.img-thumbnail:缩略图

（八）辅助类

1、关闭按钮

2、三角符号 3、浮动 4、清除浮动

  
       
   
   ×
   
   
   
      
    
     左边文档内容
    
  
    
     右边文档内容
    
   
   
    show
   
   
    hidden
   

以上大部分都是官网上面的学习内容，大家可以在官网进行查看，官网地址在最上面。

转载地址：http://cfvrn.baihongyu.com/