bootstrap 初体验

Bootstrap介绍

Bootstrap 是stwitter公司的两名前端设计师设计的，基于html css javascript的超强的前端框架。 是一移动设备为优先，同时应用于pc机 、平板、 手机。同时可以解决浏览器兼容问题。

可以通过http://v3.bootcss.com/下载。包含三个文件夹

• css.存放了各种控件的css样式
• fonts 字体库
• js 相关的js，已经包含了压缩版本的jquery。

包含min的都是压缩版本的文件。

引入Bootstrap

1.本地方式

2. 网络方式

3. 案例

bootstrap提供了大量的css类，直接调用这些类就可以很容易的美化UI，同时可以决定UI是否是响应式的，响应式可以根据屏幕的大小自动的改变UI尺寸，适配设备,只需要合适的标签添加tagname-responsive类.
适配移动设备应加入

固定宽度 1170px
内容

宽度为 100%
内容

3.1 表格
响应式适配移动设备。

书籍价格
    价格表
    
    

        
        

            
            
swift语言实战教程
56.0元
            
疯狂swift讲义
50.0元
            
iOS实战教程
56.0元
            
算法导论
86.0元
            
图解tcp/ip协议
86.0元
        
    

图片

        
        ![](../images/1.jpg)
        ![](../images/1.jpg)
    

iphone5s.png

3.2 栅格

    

      

         ![](images/1.jpg)
          
从堆叠到水平排列
          

            栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水
          
      

      

        ![](images/2.jpg)
        
从堆叠到水平排列
         

           栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围）幕到小屏幕这一范围）
         
      
      

        ![](images/3.jpg)
        
从堆叠到水平排列
         

           栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围）幕到小屏幕这一范围）
         
      
    
  

以下来自百度:https://zhidao.baidu.com/question/583480796435093365.html

col-xs-超小屏幕 手机 (<768px),.col-sm-小屏幕 平板 (≥768px),.col-md-中等屏幕 桌面显示器 (≥992px)(栅格参数).不管在哪种屏幕上，栅格系统都会自动的分12列 col-xs-和col-sm- 和col-md-*后面跟的参数表示在当前的屏幕中 div占的宽度。例如

这个div在屏幕中占的位置是：1在超小屏幕中占6列 也就是屏幕的一半（6/12） 2.在中单屏幕中占3列也就是1/4（3/12）。 如果我们要在小屏幕上并排显示3个div(12/3=4)，在大屏幕上显示6个 则col-xs-4 col-md-2这样我们就可以控制我们自己想要的什么排版了.

栅格手机.png

栅格电脑.png

     

       

              

                  ![](images/1.jpg)
                   

                   格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
                   
              
              

                  ![](images/1.jpg)
                   

                   格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
                   
              
              

              ![](images/1.jpg)
               

               格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
               
              
              

              ![](images/1.jpg)
               

               格系统用于通过一系列的行（row）与列（col）的组合来创建页面布局，你的内容就可以放入这些创建好的布局
               
              
       
       

          
1
          
1
          
1
          
1
          
1
          
1
          
1
          
1
          
1
          
1
          
1
          
1
       
       

         
4444
         
222
       

       

          
444
          
88888
       
        

          
444
          
88888
       
     

3.3 下拉列表

 
下拉列表
   

        
          登录 
        
        

          
qq登录
          
微信登录
          

          
邮箱登录
          
手机登录
          
微博登录
        
   

Paste_Image.png