Bootstrap入门

Bootstrap是一个简洁强大的前端开发框架。
官网https://getbootstrap.com/
中文网https://www.bootcss.com/

1 bootstarp入门

官网下载压缩包，并在自己的项目中引入。

项目结构
first.html代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    </head>
    <body>
    </body>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</html>

这样第一个bootstarp案例就完成了。

2 流体容器

width为auto
注意width的auto和100%的区别
实现代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../demo/css/bootstrap.min.css">
        <style type="text/css">
            .container-fluid{
                background: pink;
            }
        </style>
    </head>
    <body>
    <div class="container-fluid">
        test
    </div>
    </body>
    <script src="../demo/js/jquery.min.js"></script>
    <script src="../demo/js/bootstrap.min.js"></script>
</html>

3 固定容器

阈值	width
大于等于1200(lg 大屏pc) px	1170(1140+槽宽)px
992-1200(md 中屏pc)px	970(940+槽宽)px
768-992(sm 平板)px	750(720+槽宽)px
小于768(xs 移动手机)px	auto

实现代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../demo/css/bootstrap.min.css">
        <style type="text/css">
            .container{
                background: pink;
            }
        </style>
    </head>
    <body>
    <div class="container">
        test
    </div>
    </body>
    <script src="../demo/js/jquery.min.js"></script>
    <script src="../demo/js/bootstrap.min.js"></script>
</html>

4 栅格系统（源码解析）

下载Bootstrap源码，找到下列文件就是栅格系统源码。

栅格源码
流体容器&固定容器的公共样式

margin-right: auto;
margin-left: auto;
padding-left:  30px;
padding-right: 30px;

固定容器的特定样式

 @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }

以上代码顺序不可变，代码从上至下执行，也就是移动优先。

  margin-left:  -15px;
  margin-right: -15px;

.make-grid-columns();
//定义列的样式
   .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, 
   .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, 
   .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, 
   .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, 
   .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, 
   .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, 
   .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, 
   .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, 
   .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, 
   .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, 
   .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, 
   .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
      position: relative;
      min-height: 1px;
      padding-left: 15px;
      padding-right: 15px;

由此看出Bootstap的默认12列

列排序、列偏移

.make-grid-columns();
   .make-grid(@class) {
     /*col-xs-1,col-xs-2,col-xs-3,...col-xs-12{
          float:left;
     */
     //浮动
     .float-grid-columns(@class);
    //width
     .loop-grid-columns(@grid-columns, @class, width);
    //列排序
     .loop-grid-columns(@grid-columns, @class, pull);
     .loop-grid-columns(@grid-columns, @class, push);
    //列偏移
    .loop-grid-columns(@grid-columns, @class, offset);
}

栅格盒模型
容器两边具有15px的padding；行两边具有-15px的margin；列两边具有15px的padding

为了维护槽宽的规则，列两边必须要15px的padding
为了能使列嵌套行，行两边必须要有-15px的margin
为了让容器可以包裹住行，容器两边必须具有15px的padding
5 实现一个简单的栅格系统(仿bootstarp官网）

下载源码https://v3.bootcss.com/getting-started/
实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no ">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="thumbnail">
                <img src="images/bootstrap.PNG" alt="...">
                <div class="caption">
                    <h3>Bootstrap </h3>
                    <p>Bootstrap 优站精选频道收集了众多网站。</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="thumbnail">
                <img src="images/webpack.PNG" alt="...">
                <div class="caption">
                    <h3>webpack</h3>
                    <p> webpack是前端资源模块化管理和打包工具</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="thumbnail">
                <img src="images/react.PNG" alt="...">
                <div class="caption">
                    <h3>react </h3>
                    <p>react用于构建用户界面的JavaScript 框架</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-4 col-sm-6">
            <div class="thumbnail">
                <img src="images/typescript.PNG" alt="...">
                <div class="caption">
                    <h3>typescript</h3>
                    <p>TypeScript 是由微软开源的编程语言。</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

运行结果

lg

sm

当界面变小时，排在右边（typescript）的会先到下一行，要想使左边的先下来，首先让bootstarp排到最后一个，对他进行右排序（左右排序index值都必须大于0），在本例中一个缩略图代表3个单元，bootstarp需要左排序9个单元才能到达最左边。其他的缩略图也按此排序，并且要考虑屏幕大小不同，移动的单元也不同。

实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no ">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <div class="jumbotron">
        <h1>Hello, world!</h1>
    </div>
    <div class="row">
        <div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6">
            <div class="thumbnail">
                <img src="images/typescript.PNG" alt="...">
                <div class="caption">
                    <h3>typescript</h3>
                    <p>TypeScript 是由微软开源的编程语言。</p>
                </div>
            </div>
        </div>
     //col-md-pull-0必须存在
        <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6">
            <div class="thumbnail">
                <img src="images/react.PNG" alt="...">
                <div class="caption">
                    <h3>react </h3>
                    <p>react用于构建用户界面的JavaScript 框架</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6">
            <div class="thumbnail">
                <img src="images/webpack.PNG" alt="...">
                <div class="caption">
                    <h3>webpack</h3>
                    <p> webpack是前端资源模块化管理和打包工具</p>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6">
            <div class="thumbnail">
                <img src="images/bootstrap.PNG" alt="...">
                <div class="caption">
                    <h3>Bootstrap </h3>
                    <p>Bootstrap 优站精选频道收集了众多网站。</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

运行结果

lg

sm

注意：

<div class="col-lg-3 col-lg-push-3 col-md-4  col-sm-6 col-sm-pull-6">

这种写法是错误的，col-md-pull-0不能少，写栅格系统lg、md、sm、xs必须按照顺序写，不能跳过某一个。

 <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6">

以上代码是列排序的实例，下面我们来看一个列排序的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style type="text/css">
        .row{
            background: #5bc0de;
        }
        div[class|=col]{
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-lg-offset-4">col-lg-4</div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</html>

col-lg-offset-4让本来在左边的格子移到了中间

6 less

less的继承

//第一种写法
#test{
      &:extend(.father)
}
//第二种写法
#test:extend(.father){
 }

建议使用第一种。
b.继承实质上将.father选择器和#test组合成一个选择器
c.all:继承所有和.father相关的声明块。
d.父类不能定义成混合（继承不灵活性能高混合灵活性能低）
less的避免编译
~“不会编译的内容”，变量在less中属于块级作用域，延迟加载

最后编辑于：2020.07.01 18:26:51

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,826评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,968评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,234评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,562评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,611评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,482评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,271评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,166评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,608评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,814评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,926评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,644评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,249评论 3赞 329
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,866评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,991评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,063评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,871评论 2赞 354