尚硅谷---Bootstrap_bootstrap 教程尚硅谷-CSDN博客

本文链接：https://blog.csdn.net/Father_Of_Soft/article/details/128713756

一、容器

1.流体容器

2.固定容器

阈值：1200/992/768/576

阈值	width
x>=1200 （lg 大屏pc）	1140（1140+30）
992<=x<1200 （md 中屏pc）	960（940+30）
768<=x<992 （sm 平板）	720（720+30）
576<=x<768 （xs 移动手机）	540
x<576	100%

3.栅格系统

在bootstrap中，默认将栅格分为12格

二、容器源码分析

固定和流体容器的公共样式：

.container-fixed(@gutter: @grid-gutter-width) {
  padding-right: ceil((@gutter / 2));
  padding-left: floor((@gutter / 2));
  margin-right: auto;
  margin-left: auto;
  &:extend(.clearfix all);
}

槽宽：@grid-gutter-width: 30px;

清除浮动：

只要有.container-fixed，就会清除浮动

.clearfix() {
  &:before,
  &:after {
    display: table; // 2
    content: " "; // 1
  }
  &:after {
    clear: both;
  }
}

固定容器的媒体查询（顺序不可变）：

.container {
  .container-fixed();

  @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;
  }
}

容器大小：

@container-tablet:             (720px + @grid-gutter-width);
@container-sm:                 @container-tablet;


@container-desktop:            (940px + @grid-gutter-width);
@container-md:                 @container-desktop;


@container-large-desktop:      (1140px + @grid-gutter-width);
@container-lg:                 @container-large-desktop;

三、行

.make-row(@gutter: @grid-gutter-width) {
  margin-right: floor((@gutter / -2));
  margin-left: ceil((@gutter / -2));
  &:extend(.clearfix all);
}

因此，行：

margin-left:-15px;

margin-right:-15px;

四、列

4.1 第一步

递归调用

整体作为类定义样式

.make-grid-columns() {
  .col(@index) { // initial
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), @item);
  }//.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1
  .col(@index, @list) when (@index =< @grid-columns) {
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  /* 
    .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-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-1, .col-sm-1, .col-md-1, .col-lg-1,.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,...,.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12
    */
  .col(@index, @list) when (@index > @grid-columns) { // terminal，统一定义样式
    @{list} {
      position: relative;
      min-height: 1px;
      padding-right: floor((@grid-gutter-width / 2));
      padding-left: ceil((@grid-gutter-width / 2));
    }
  }
  .col(1); // kickstart it
}

bootstrap里移动端优先（理由如下）

.make-grid(xs);

@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}
@media (min-width: @screen-md-min) {
  .make-grid(md);
}
@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

4.2 第二步

// Create grid for specific class
.make-grid(@class) {
  .float-grid-columns(@class);
  .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);
}

4.2.1 循环递归设置为左浮动

.float-grid-columns(@class) {
  .col(@index) { // initial
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) { // general
    @item: ~".col-@{class}-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > @grid-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .col(1); // kickstart it
}

4.2.2 设置宽度

.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

type为width

.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}

因而：

.col-xs-12{
    width:12/12;
}
.col-xs-11{
    width:11/12;
}
/* ... */
.col-xs-1{
    width:1/12;
}

4.2.3 push

入口：

.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

type为push：

.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
}

4.2.4 pull

入口：

.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

type为pull

.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}

4.2.5 列偏移

入口：

.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  // next iteration
  .loop-grid-columns((@index - 1), @class, @type);
}

type为offset

.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
}

五、栅格实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="./js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
<body>
<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
            <img src="./img/1.png" alt="...">
            <div class="caption">
                <h3>优站精选</h3>
                <p>Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美、有创意的网站</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
        <div class="thumbnail">
            <img src="./img/2.png" alt="...">
            <div class="caption">
                <h3>React</h3>
                <p>React起源于Facebook的内部项目，是一个用于构建用户界面的JavaScript库</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
            <img src="./img/3.png" alt="...">
            <div class="caption">
                <h3>Webpack</h3>
                <p>Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包生成符合生产环境部署的前端资源。</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="thumbnail">
            <img src="./img/4.png" alt="...">
            <div class="caption">
                <h3>TypeScript</h3>
                <p>TypeScript是由微软开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>

六、响应式布局

6.1 显示与隐藏


.hidden-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-invisibility();
  }
}
.hidden-sm {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-invisibility();
  }
}
.hidden-md {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-invisibility();
  }
}
.hidden-lg {
  @media (min-width: @screen-lg-min) {
    .responsive-invisibility();
  }
}

.visible-xs {
  @media (max-width: @screen-xs-max) {
    .responsive-visibility();
  }
}
.visible-sm {
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .responsive-visibility();
  }
}
.visible-md {
  @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .responsive-visibility();
  }
}
.visible-lg {
  @media (min-width: @screen-lg-min) {
    .responsive-visibility();
  }
}

6.2 clearfix

.clearfix() {
  &:before,
  &:after {
    display: table; // 2
    content: " "; // 1
  }
  &:after {
    clear: both;
  }
}

混合必须加括号，是不能继承的

所以在工具类里，调用了一次clearfix

.clearfix {
  .clearfix();
}

6.3 栅格盒模型设计的精妙之处

1.容器两边具有15px的padding

2.行两边具有-15px的margin

3.列两边具有15px的padding

为了维护槽宽的规则：

列两边必须有15px的padding

为了能使列嵌套行：

行两边必须要有-15px的margin

为了能让容器可以包裹住行：

容器两边必须有15px的padding

（容器属性已重置为box-sizing: border-box;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/bootstrap.js"></script>
    <style>
        div[class^=col-lg]{
            background-color: pink;
            border:1px solid #000;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-10">col-lg-10</div>
        <div class="col-lg-2">col-lg-2</div>
    </div>
    <div class="row">
        <div class="col-lg-6">col-lg-6</div>
        <div class="col-lg-6">col-lg-6</div>
    </div>
    <div class="row">
        <div class="col-lg-4">col-lg-4</div>
        <div class="col-lg-8">col-lg-8</div>
    </div>
</div>
</body>
</html>

6.4 复习

1.less的继承

#test{

&:extend(.father)

}

或：

#test:extend(.father){...}

继承实质上是将选择器.father与#test组合成一个选择器

声明块使用.fahter的

all:继承所有和.father相关的声明块

切记父类不能定义成mixin（继承不灵活但性能高，混合灵活但性能低）

2.less的避免编译

~"不会被编译的内容"

变量在less中属于块级作用域，延迟加载

3.bootstrap栅格系统&源码分析

流体容器

width:auto

两侧15px的padding（公共样式）

固定容器

阈值：

xs（小于768） width：auto

sm（大于等于768px） width：720+槽宽

md（大于等于992px） width：940+槽宽

lg（大于等于1200px） width：1140+槽宽

两侧15px的padding（公共样式）

行

两侧-15px的margin

列

公共样式：

两侧有15px的padding

相对定位

float

width：1~12

left：0~12

right：0~12（0：auto）

margin-left：0~12

列偏移实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/bootstrap.js"></script>
    <style>
        .row{
            background-color: pink;
        }
        div[class^=col]{
            border:1px solid #000;
        }
    </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>
</html>

4.列排序

注意阈值上的样式不能跳着写

6.5 bootstrap定制化

to B项目：内网，自己使用

to C项目：给客户使用

bootstrap定制化即自己修改参数：

@import "./bootstrap.css";
@grid-gutter-width:200px;

七、bootstrap实例

7.1 导航

<nav class="navbar navbar-inverse">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">现代浏览器博物馆</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">综述<span class="sr-only">(current)</span></a></li>
                <li><a href="#">简述</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">特点<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Chrome</a></li>
                        <li><a href="#">Firefox</a></li>
                        <li><a href="#">Safari</a></li>
                        <li><a href="#">Opera</a></li>
                        <li><a href="#">IE</a></li>
                    </ul>
                </li>
                <li><a href="#">关于</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

7.2 轮播

稍作修改的css样式：

    <style>
        .carousel-caption{
            bottom:60%;
        }
        .carousel-control{
            opacity: 0;
        }
    </style>

html主要实现代码：

<div class="container">
    <div class="col-lg-6 col-lg-offset-3">
        <div id="carousel-example-generic" class="carousel slide damu-carousel" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./img/1.png" alt="...">
                    <div class="carousel-caption">
                        <p>Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美、有创意的网站</p>
                    </div>
                </div>
                <div class="item">
                    <img src="./img/2.png" alt="...">
                    <div class="carousel-caption">
                        <p>React起源于Facebook的内部项目，是一个用于构建用户界面的JavaScript库</p>
                    </div>
                </div>
                <div class="item">
                    <img src="./img/3.png" alt="...">
                    <div class="carousel-caption">
                        <p>Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包生成符合生产环境部署的前端资源。</p>
                    </div>
                </div>
                <div class="item">
                    <img src="./img/4.png" alt="...">
                    <div class="carousel-caption">
                        <p>TypeScript是由微软开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

也可以通过jQuery修改轮播图样式：

<script>
    $('.carousel').carousel({
        interval:200,
        pause:null,
        wrap:false
    })
</script>

7.3 三列布局

<div class="container">
    <div class="row">
        <div class="col-md-3 col-md-offset-2">
            <div class="thumbnail text-center">
                <img src="./img/1.png" alt="...">
                <div class="caption">
                    <h3>Bootstrap</h3>
                    <p>Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美、有创意的网站</p>
                    <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail text-center">
                <img src="./img/2.png" alt="...">
                <div class="caption">
                    <h3>React</h3>
                    <p>React起源于Facebook的内部项目，是一个用于构建用户界面的JavaScript库</p>
                    <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail text-center">
                <img src="./img/3.png" alt="...">
                <div class="caption">
                    <h3>Webpack</h3>
                    <p>Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包生成符合生产环境部署的前端资源。</p>
                    <p><a href="#" class="btn btn-default" role="button">点我下载</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

7.4 标签页

<div class="container" style="overflow:hidden">
    <div class="row">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#bootstrap" aria-controls="bootstrap" role="tab" data-toggle="tab">Bootstrap</a></li>
            <li role="presentation"><a href="#react" aria-controls="react" role="tab" data-toggle="tab">React</a></li>
            <li role="presentation"><a href="#webpack" aria-controls="webpack" role="tab" data-toggle="tab">Webpack</a></li>
            <li role="presentation"><a href="#typescript" aria-controls="typescript" role="tab" data-toggle="tab">Typescript</a></li>
        </ul>

        <hr>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="bootstrap">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <h3>Bootstrap</h3>
                            <p>Bootstrap优站精选频道收集了众多基于Bootstrap构建、设计精美、有创意的网站</p>
                        </div>
                        <div class="col-md-6">
                            <img src="./img/1.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="react">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <img src="./img/2.png" alt="">
                        </div>
                        <div class="col-md-6">
                            <h3>React</h3>
                            <p>React起源于Facebook的内部项目，是一个用于构建用户界面的JavaScript库</p>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="webpack">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <h3>Webpack</h3>
                            <p>Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包生成符合生产环境部署的前端资源。</p>
                        </div>
                        <div class="col-md-6">
                            <img src="./img/3.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="typescript">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6">
                            <img src="./img/4.png" alt="">
                        </div>
                        <div class="col-md-6">
                            <h3>Typescript</h3>
                            <p>TypeScript是由微软开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

7.5 模态框

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">我是一个模态框</h4>
            </div>
            <div class="modal-body">
                <p>我是一个模态框&hellip;</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

标签页

<script>
    $('#damu-nav>li a').click(function(e){
        var href=$(this).attr('href')
        $('#damu-list>li>a[href='+(href)+']').tab('show')
        $(document).scrollTop($('#damu-tab').offset().top)
        e.preventDefault()
    })
</script>

完结撒花❀❀~