1

BootStrap_1 浓缩版本

BootStrap（基于JQuery框架）

　　　商业互吹：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局，移动设备优先选择的WEB项目。。。

　　特色：1、响应式布局

　　　　　2、基于flex的栅格系统

　　　　　3、丰富的组件和工具方法

　　　　　4、常见交互使用

　　官网：https://getbootstrap.com/

　　下载：source files  源码-->dist-->bootstrap.css(包含bootstrap-grid.css[栅格系统]、bootstrap-reboot.css[重置])

　　引入：把bootstrap.css复制粘贴到项目，然后link引入（和普通的类是一样的）

 

　container(版心)

　container-fluid(通栏)

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="./bootstrap.css"/>
    </head>
    <body>
        <div class="container" style="background-color: orange;">
            container
        </div>
        <div id="" class="container-fluid" style="background-color: blue;">
            container-fluid
        </div>
    </body>
</html>

　　效果显示：

 

　　回调节点:576->768->992->1200

　　min-width:576px-> max-width:540px

　　min-width:768px->max-width:720px

　　min-width:960px->max-width:960px

 

posted @ 2020-11-19 14:42  small_zhouzhou  阅读(73)  评论(0)    收藏  举报
TOP