Bootstrap入门

作者: TiaNa_na | 来源:发表于2019-08-04 23:19 被阅读0次

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中属于块级作用域，延迟加载

网友评论

本文标题：Bootstrap入门

本文链接：https://www.haomeiwen.com/subject/huemlctx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！