MENU

Bootstrap 4.0

• October 21, 2020 • Read: 2355 • 学习笔记,Web

快速开发?当然选择bootstrap了,它基于Sass( Less)前端开发库,提供了一套完整的css以及匹配的js。需要什么东西,直接到文档中挑选使用就好了。
其具有以下特性:完整的基础CSS插件;丰富的预定义样式表;基于jQuery的js插件集;非常灵活的响应式栅格系统,而且崇尚移动先行的思想。

使用样式表

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  • integrity="文件指纹"

    Web安全方面的内容,涉及到劫持、xss攻击等
  • crossorigin="anonymous"

    对此元素的CROS请求不设置凭据标志(不携带信息)

如果想要使用功能性的组件,需要引入以下文件:

<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- popper -->
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  • 上面的文件一定是放在</body>标签 之前
  • 顺序:

    1. jquery.js
    2. popper.js(提示框插件)
    3. bootstrap.js
  1. 下载文件,直接引入

    这种方式更稳定安全

基本页面的组成

<!-- 设置视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 引入css -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 引入JS相关文件,使用组件中的功能 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  • shrink-to-fit=no

    苹果专有属性,针对 IOS9 ,安卓及其他系统没有

    针对超出屏幕宽度的内容,也会缩放显示到屏幕,做的处理

与Bootstrap3的基本页面对比

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  • 比上面多了<!--[if lt IE 9]> <![endif]--> 的内容

条件注释

根据一定的条件,选择当前内容是否进行注释,上述表示:如果 IE 小于 9 则不注释该内容;主要用于兼容 IE8

条件注释主要用于处理 IE 兼容问题,针对IE5 ~ IE9的版本有效

  • 基础语法

    <!--[if IE]> html语句 <![endif]-->
  • 指定版本

    <!--[if IE 6]> html代码 <![endif]-->
  • 指定版本范围

    <!--[if lt IE 8]> html代码 <![endif]-->
    • lt 小于
    • gt 大于
    • lte 小于等于
    • gte 大于等于

为什么不需要html5shivrespond

Bootstrap 3Bootstrap 4
兼容>=IE8 、 >=ios6>IE10 、 >ios7

IE10+都是接受H5标签的,所以这两个兼容文件,我们不需要了

当前市场上,主要流行的依旧是 Bootstrap3,兼容情况更好,更稳定

Bootstrap重要样式及布局

  1. 盒模型:所有的盒模型都是怪异盒模型box-sizing:border-box,为避免设置padding的时候,影响布局,如果不要可以单独去除
  2. 栅格布局

容器 .container

boot是响应式框架,容器在不同分辨路有不同的宽度。

1

依然逃不掉的先分行再分列
.row

<div class="container">
    <div class="row"></div>
</div>

多种分法

  1. .col 如果是子元素平分父元素的话,就直接使用.col
<div class="container">
    <div class="row">
        <div class="col">xiaomo</div>
        <div class="col">xiaomo</div>
    </div>
</div>
  1. .col-sm-num 这个class中,num代表一个数字(从1-12),boot的栅格系统把一行分成列12份,num代表份数,而中间的type对应small。意为,在游览器宽度大于等于578,小于768的时候,在栅格系统中占有的份数
    对应的class有.col-num / .col-sm-num / .col-md-num / .col-lg-num / .col-xl-num
<div class="container">
    <div class="row">
        <div class="col-md-3">xiaomo</div>
        <div class="col-md-4">xiaomo</div>
        <div class="col">xiaomo</div>
    </div>
</div>
  1. 单元格的对齐方式
    align-items-start / align-items-center / align-items-end / align-content-start / align-content-center / align-content-end / justify-content-start / justify-content-center / justify-content-end / justify-content-around / justify-content-between
<style>
        .container {
            height: 300px;
            border: 1px solid #1890ff;
        }
        .row {
            height: 100%;
        }
        .item {
            height: 60px;
            border: 1px solid #1890ff;
        }
</style>

<div class="container">
    <div class="row align-content-center justify-content-center">
        <div class="col-1 item">xiaomo</div>
        <div class="col-1 item">xiaomo</div>
        <div class="col-1 item">xiaomo</div>
        <div class="col-1 item">xiaomo</div>
    </div>
</div>

1

  1. 其他
    .w 100 用于拆行
    .order用于排序
    .order-num 数字越大越靠后
    另外,.order-first 一定可以把一个元素放在第一位
    .order-last 一定可以把一个元素放在最后一位
<div class="container">
    <div class="row align-content-center justify-content-center">
        <div class="col-1 item order-last">1.xiaomo</div>
        <div class="col-1 item">2.xiaomo</div>
        <div class="col-1 item">3.xiaomo</div>
        <div class="col-1 item">4.xiaomo</div>
        <div class="col-1 item">5.xiaomo</div>
        <div class="col-1 item order-first">6.xiaomo</div>
    </div>
</div>

2

.offset用于设置偏移量
.offset-num / .offset-type-num

<div class="container">
    <div class="row align-content-center">
        <div class="col-1 item offset-4">xiaomo</div>
        <div class="col-1 item">xiaomo</div>
        <div class="col-1 item">xiaomo</div>
        <div class="col-1 item">xiaomo</div>
    </div>
</div>

3

组件

Bootstrap常用的布局组件结构, 官方文档,需要什么组件,能查得到即可,对于分页等复杂需求,还需要选择合适的bootstrap插件进行增强

4

[size=18]常用js插件[/size]

5

在之前CSS的基础上,BootStrap自带12种jQuery插件,其利用bootstrap数据API,大部分插件可以在不编写任何代码的情况下触发。
在bootstrap中,js插件遵循以下3个规则。

  • Html布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性
  • javascript实现步骤:所有插件都遵循jQuery插件开发的标准步骤,所有的事件保持统一IDE标准
  • 插件调用方法:所有插件的使用,都可以是HTML声明式,也可以是js调用式,且支持多种回调和可选参数。

更多内容可看文档

Bootstrap V3文档
Bootstrap V4文档

Bootstrap开发的优点与缺点

优点:可以进行快速开发,准备了很多页面中经常有的内容,例如导航栏、分页 、下拉菜单

缺点:

  1. 东西太多,体积太庞大,不需要的样式也会加载进来
  2. 组件样式对应不上设计图

知道 bootstrap3 和 bootstrap4的差异

  1. 栅格布局
  2. body的font-size
  3. xs前缀去除
  4. 添加576px媒询

    ...等


作者:moshanghua 转载:人工智能学院
2020-10-21

版权属于:字节星球/肥柴之家 (转载请联系作者授权)
原文链接:https://www.bytecho.net/archives/bootstrap.html
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。

Last Modified: January 16, 2021
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

2 Comments
  1. zizdog zizdog IP属地:山西     Android    FireFox

    我还没用前端框架,自己写真心累。

    1. Henry Henry     Windows 10+    Google Chrome

      @zizdog欢迎访问,大佬的网站很棒,点个赞?