Bootstrap【前端框架】

一、环境安装

1、下载Bootstrap库

网址：http://www.bootstrap.com

二·引入

用它的时候记得引入：

   bootstrap.min.css：Bootstrap核心样式【添加到head标签中】
    jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
    bootstrap.min.js：Bootstrap核心库

 

三、 Bootstrap CSS
         1、 概览
                1)、H5文档类型：
                2)、移动设备优先，在head中添加：

            width=device-width：呈现在不同设备上
            initial-scale=1.0：以1:1比例呈现，不会有任何缩放
            user-scalable=no：禁用网页缩放功能
            maximum-scale=1.0：页面放大程序，1.0将禁止用户放大实际尺寸
        
                3)、布局容器
                    固定容器【class="container"】
                大屏幕（大桌面显示器，大于等于 1200px）
                    @media (min-width: @screen-lg-min) { ... }
                中等屏幕（桌面显示器，大于等于 992px）
                    @media (min-width: @screen-md-min) { ... }
                小屏幕（平板，大于等于 768px）
                    @media (min-width: @screen-sm-min) { ... }
                超小屏幕（手机，小于 768px）
            流体容器【class="container-fluid"】

一般直接用固定容器

接下来来看我用栅格实现的功能

 代码送上：

    
    
    
    
    
    
    


    
    

        

            您好，欢迎来到屌丝书店
            
              
            
            

              

                

                  首页(current)
                
                

                  登录
                
                

                  注册
                
                

                  我的购物车
                
              
            

        
       
      
      

          
        

          

            

            

                

                    

                        
                        

                          查询
                        
                      
                
              

          
        
         
         

            
            

              书籍分类
            
            
            

                

                轮播图
                 
                

                    

                    ① 新书上架
                    
                    

                    ②新书上架
                    
                    

                    ③ 新书上架
                    
                    

                    ④ 新书上架
                    
                    

                    ⑤ 新书上架
                    
                
                
 
                    

                    ①热门书籍
                    
                    

                    ②热门书籍
                    
                    

                    ③热门书籍
                    
                    

                    ④热门书籍
                    
                    

                    ⑤热门书籍