BootStrap学习

简介：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局，移动设备优先的WEB项目。由Twitter于2011年8月在GitHub上发布，，它将常见的CSS布局小组件和JavaScript插件进行了完整的封装，大大提升工作效率。

<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>H</title>
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="container">
            asdfasdfdsafdsaaa
        </div>
    </body>
</html>

栅格系统

1.row(行）必须在.container中；

2.使用行在水平方向创建列组；

3.具体内容在列中；

<!DOCTYPE html>
<html lang="zh-CN">
    <head>***</head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
                <div class="col-md-1">col-md-1</div>
            </div>
            <div class="row">
                <div class="col-md-8 col-sm-6">col-md-8</div>
                <div class="col-md-4 col-sm-6">col-md-4</div>
                <div class="col-md-8">col-md-8</div>
            </div>
        </div>
    </body>
</html>

媒体查询：用于在不同的分辨率下设置不同的css样式，屏幕宽度小于某个值时候显示特定的内容。

@media (max-767px) {
                div{
                    background: #AC2925;
                }
            }

列偏移：

<div class="col-md-4 col-md-offset-4">
    col-md-4
</div>

列排序

<div class="row">
       <div class="col-md-3 col-md-push-5">
             col-md-3
       </div>
       <div class="col-md-6 col-md-pull-2">
             col-md-6
       </div>
</div>

清除浮动

默认使用float:left排列

<div class="row">
                <div class="col-xs-6 col-sm-3">
                    col-xs-6 col-sm-3 1<br>asdfasdfdsfdsa
                </div>
                <div class="col-xs-6 col-sm-3">
                    col-xs-6 col-sm-3 2
                </div>
                <div class="clearfix visible-xs">
                    
                </div>
                <div class="col-xs-6 col-sm-3">
                    col-xs-6 col-sm-3 3
                </div>
                <div class="col-xs-6 col-sm-3">
                    col-xs-6 col-sm-3 4
                </div>
            </div>

1.BootStrap全局样式

body背景为白色，margin:0,字体、大小，行间距都进行了设置，所有默认样式都在normalize less 和scaffolding less

Normalize.css BootStrap第三方库，将不同浏览器css样式效果统一的css库。