Bootstrap框架

原文链接：https://blog.csdn.net/2301_80068547/article/details/134619359

一、Bootstrap 简介
Bootstrap 来自 Twitter (推特)，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS和 JavaScript 的，它简洁灵活，使得 Web开发更加快捷。

中文官网：https://www.bootcss.com/

官网：https://getbootstrap.com/

框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

<link href="css/bootstrap.min.css" rel="stylesheet">
<button type="button" class="btn btn-danger">登录</button>
<span class="glyphicon glyphicon-search"></span>

优点：

标准化的 html + css编码规范

提供了一套简洁、直观、强悍的组件

有自己的生态圈，不断的更新迭代

让开发更简单，提高了开发的效率

版本：

2.x.x：停止维护，兼容性好，代码不够简洁，功能不够完善。

3.x.x：目前使用最好，稳定，但是放弃了 IE6-IE7.对IE8支持但是界面效果不好，偏向于开发响应式布局、移动设备优先的WEB项目。

4.x.x：最新版，目前还不是很流行

二、Bootstrap 使用
控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

Bootstrap使用四步曲：

1、创建文件夹结构

2、创建html 骨架结构

3、引入相关样式文件

4、书写内容

1.创建文件夹结构

2. 创建html 骨架结构

<!-- 要求当前网页使用 IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1">
 <!--[if lt IE 9]>
      <!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题 -->
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <!-- 解决ie9以下浏览器css3 Media Query的不识别 -->
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

　3.引入相关样式文件

1 2	`<!-- Bootstrap核心样式 -->` `<link` `href="css/bootstrap.min.css" rel="stylesheet">`

4. 书写内容

直接拿Bootstrap 预先定义好的样式来使用

修改 Bootstrap 原来的样式，注意权重问题

学好 Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[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]-->
    <link href="boostrap/css/bootstrap.min.css" rel="stylesheet">
    <title>Document</title>
    <style>
        /* 利用我们自己写的样式覆盖原先的样式 */
        .login {
            width: 80px;
            background-color: pink
        }
    </style>
</head>
<body>
    <div class="btn btn-success login">登录</div>
</body>
</html>

三、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container容器，Bootstrap 预先定义好了这个类，叫 .container 它提供了两个作此用处的类。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[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]-->
    <link href="boostrap/css/bootstrap.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="container">123</div>
    <div class="container-fluid">123</div>
</body>
</html>

Bootstrap 栅格系统
一、栅格系统简介
栅格系统英文为 "grid systems"，也有人翻译为 "网格系统"，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 ( viewport ) 尺寸的增加，系统会自动分为最多 12 列。

Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把 container 划分为 12 等份。

二、栅格选项参数
栅格系统用于通过一系列的行 (row) 与列 ( column ) 的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

行 (row) 必须放到 container 布局容器里面

我们实现列的平均划分，需要给列添加类前缀

xs-extra small：超小；sm-small：小；md-medium：中等；lg-large：大；

列(column) 大于12，多余的 "列 (column)" 所在的元素被作为一个整体另起一行排列

每一列默认有左右15像素的 padding

可以同时为一列指定多个设备的类名，以便划分不同的份数，例如 class="col-md-4-sm-6"

<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
    <!-- 如果孩子的份数相加等于12，则孩子能占满整个container的宽度 -->
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-2">4</div>
    </div>
    <!-- 如果还在的份数相加 小于 12，则占不满整个container的宽度会有空白-->
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-1">4</div>
    </div>
     
    <!-- 如果还在的份数相加 大于 12，则多余的那一列会另起一行显示-->
    <div class="row">
        <div class="col-lg-6">1</div>
        <div class="col-lg-2">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div>
     
</div>

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
    </div>
</div>

　　小屏幕下:

超小屏幕下：

中等屏幕下：

大屏幕下：

三、列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-*元素内。

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <!-- 我们列嵌套最好加1个行 row 这样可以取消父元素的 padding值，而且高度自动和父级一样高-->
                <div class="col-md-4">a</div>
                <div class="col-md-8">b</div>
            </div>
        </div>实际是通过使用 * 选择器为当前元素增加了左侧的边距 (margin)
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>

四、列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类。

<div class="container">
    <div class="row">
        <div class="col-md-4">左侧</div>
        <div class="col-md-4 col-md-offset-4">右侧</div>
    </div>
     
    <div class="row">
        <!-- 如果只有一个盒子，那么就偏移 = (12-8) /2 -->
        <div class="col-md-8 col-md-offset-2">中间盒子</div>
    </div>
</div>

五、列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列 ( column ) 的顺序。

<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-push-8">左侧</div>
        <div class="col-md-8 col-md-pull-4">右侧</div>
    </div>
</div>

六响应式工具
为了加快在移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备显示或隐藏页面内容。

与之相反的，是 visible-xs visible-sm visible-md visible-lg 是显示某个页面内容。

<div class="container">
    <div class="row">
        <div class="col-xs-3">
           <!--只有在大屏幕下才会显示-->
            <span class="visible-lg">我会显示哦</span>
        </div>
        <div class="col-xs-3"><2/div>
        <div class="col-xs-3 hidden-md hidden-xs">我会变魔术哦</div>
        <div class="col-xs-3">4</div>
    </div>
</div>