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"】

一般直接用固定容器

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

Bootstrap【前端框架】_第1张图片

 代码送上:




    
    
    
    Document
    
    
    


    
    
      
书籍分类
轮播图
① 新书上架
②新书上架
③ 新书上架
④ 新书上架
⑤ 新书上架
①热门书籍
②热门书籍
③热门书籍
④热门书籍
⑤热门书籍

你可能感兴趣的:(bootstrap,前端框架,前端)