原文链接：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/[email protected]/dist/html5shiv.min.js"></script>
<!-- 解决ie9以下浏览器css3 Media Query的不识别 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
3.引入相关样式文件
<!-- 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/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
标签：md,container,框架,样式,Bootstrap,栅格,col From： https://www.cnblogs.com/Dongmy/p/18230319