Bootstrap

概念

传统的使用div+CSS实现响应式布局，为了适配各种设备，会写大量的CSS代码，导致开发效率降低。Bootstrap是一个移动端优先用于快速搭建响应式布局的前端UI框架，能够使用已经写好的代码用于搭建出一个具有良好适应性的页面。Bootstrap内置了很多的组件，比如轮播图、标签页、分页、表单等，用户可以直接使用。Bootstrap还提供了一套用于构建响应式布局的栅格系统，用于快速搭建一个良好适应性的页面布局。但Bootstrap有些内置组件不易修改，其本身用了JavaScript来实现的。

目前国内常用Bootstrap版本是3.3.7 ，很稳定，其内部使用了浮动布局来实现响应式。国外以及国内大公司常用的是4.6版本。4.6版本不兼容IE低版本。Bootstrap3使用Less语言，有4种栅格类，使用px为单位，使用push和pull向左右移动，使用floatl的布局方式。Bootstrap4使用Sass语言编写，有5种栅格类，除部分margin:和padding使用px，其余使用rem和em为单位，偏移列通过offset-类设置选择弹性盒模型（flexbox）。且Bootstrap4新增网格层适配了移动端，全面引入ES6新特性（重写所有JavaScript:插件），css文件减少了至少40％，所有文档都用Markdown编辑器重写，放弃对IE8的支持。

引入

引入CSS

• 官网下载对应版本的生产版本的Bootstrap文件。
• 页面中中通过引入bootstrap.min.css

引入jQuery以及js

• jquery：一个JavaScript框架，主要用于减少页面中的JavaScript代码，bootstrap的组件使用了jQuery，所以说引入jQuery3.0及以上版本(下载地址)。

• 除了jQuery以外，还需要引入bootstrap.min.js以及bootstrap.bundle.min.js。

一个标准的使用Bootstrap页面初始代码

    
    
    
    
    


    
    测试效果
    
    
    
    
    

两种常见使用流程

• 单独的使用CSS部分。如果页面只使用栅格系统或者不需求js的组件，只需要引入CSS即可。
• 如果要使用一些带js的插件，必须引入js文件。

栅格系统

概念

Bootstrap内置的一整套用于快速搭建响应式布局的系统，内置了很多的用于布局的类，我们需要按照它所要求的规范去使用内置的class来搭建页面。

主要内容

• 12列系统

  Bootstrap会将一行看成12列，12列由该行的内容进行分配。

• 布局的HTML架构

  • 最外层容器(指的一个模块，)会给.container让容器本身有自适应效果
    • 屏幕宽度>=1200(xl) 容器宽度为1140px
    • 屏幕宽度>=992(lg) 容器宽度为960px
    • 屏幕宽度>=768(md) 容器宽度为720px
    • 屏幕宽度>=568(sm) 容器宽度为540px
    • 屏幕宽度<568 容器宽度为100%
  • .container容器内部只允许有.row的直接子标签
    • 每个.row的容器内部会采用12列系统
    • 12列系统内的标签可以通过bootstrap所提供的内置的类来进行指定分配列数。
    • 可以设置一行在不同的屏幕宽度下占据的列数
      • 特大(1140px)·：一行显示2个: col-xl-6
      • 大(960px):一行显示3个：col-lg-4
      • 中(720px):一行显示6个：col-md-2
      • 小(540px):一行显示2个: col-sm-6
      • 特小：默认是一行一个:col-12
    • 希望每一行的内容列数自动分配，给.row的每个直接子标签添加.col

常见组件

可查看中文文档

按钮

Primary
Primary
Primary
Primary

表单

    

        Email address
        
        We'll never share your email with anyone else.
    
    

        Password
        
    
    

        
        Check me out
    
    Submit

表格

卡片

    
    

        
花瓶1
        
好看又不贵
        立即购买
    

警告框

    Holy guacamole! You should check in on some of those
    fields below.
    
        ×
    

轮播图

 

     

         

         

         

         

         

     
     

         

             
         
         

             
         
         

             
         
         

             
         
         

             
         
     
     
         
         Previous
     
     
         
         Next
     

下拉菜单

    
        Dropdown button
    
    

        Action
        Another action
        Something else here
    

标签页

	

		
			 菜鸟教程
		
	
	
iOS


	

		
菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。
	
	

		
iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
			TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。
	

模态框

    Launch demo modal


    

        

            

                
登录
                
                    ×
                
            
            

                
            
            

                重置
                登录