BootStrap介绍
1.Bottstrap是当前世界上最受欢迎的响应式（这也是最好的原因），移动设备优先的门户和应用前端框架
2.提供高质量的html，css以及javascript，让我们的web工程项目变的无比简单，包括官方的cdn和启动器服务
3完全翻译的中文官网：http://code.z01.com/v4/
应用：前端：一套代码可以在不同设备上进行不同的响应：主要应用于展示性网站，不涉及大量的交互，要偏展示性为主，业务不能太复杂
浏览器与设备兼容
浏览器：Bootstrap几乎支持所有主流浏览器上各浏览器的最新稳定版本
移动设备：支持主流移动的最新版本
桌面浏览器：大部分也支持
上手Bootstrap
引入Bootstrap的css样式和JQuery.js和Bootstrap.js
Bootstrap使用注意:
1.必须要有html5的声明，否则样式会失真
<!doctype html>
2.必须在网页的head区增加响应式的视图标签
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
3.盒尺寸
bootstrap将全局的box-sizing的值由默认的content-box重定义为border-box,以保证padding不会影响元素的最后计算宽度
如果你要恢复原尺寸可用 .
selector-for-some-widget{
box-sizing:content-box
}
容器(Container)
（1）概念
1.Container容器是窗口布局的最基本元素,Bootstrap推荐所有样式都定义在.container或.container-fluid容器之中
2.这是启动整个栅格系统必不可少的前置条件,他们分别对应一个响应式的，固定宽度的容器,或者选择一个流式自适应浏览器或容器最大合法宽度的窗口
代码演示:要加上.container或.container-fluid包裹在最外面的盒子里面
<div class="container" style="background-color: red;">流式容器</div>//使用媒体查询实现的响应式
<div class="container-fluid" style="background-color: red;">固定容器</div>//
用代码实现响应式布局，也能实现不过推荐使用别人封装好的，
<html>
<style>
/*超小屏幕*/
@media (max-width: 575px) {
.container-self{
background-color: red;
width: 100%;
}
}
/*小屏幕*/
@media (min-width: 576px) and (max-width: 767px){
.container-self{
background-color: green;
width: 540px;
}
}
/*中等屏幕*/
@media (min-width: 768px) and (max-width: 991px){
.container-self{
background-color: blue;
width: 720px;
}
}
/*大屏幕*/
@media (min-width: 992px) and (max-width: 1199px){
.container-self{
background-color: purple;
width: 960px;
}
}
/*超大屏幕*/
@media (min-width: 1200px){
.container-self{
background-color: goldenrod;
width: 1140px;
}
}
</style>
<div class="container-self" style="height: 100px; margin: 0 auto;">自定义容器</div>
</html>
栅格系统
(1)概念：
1Bootstrap包含一个强大的移动优先的网格系统,它是基于一个12列的布局,有5种响应尺寸(对应不同的屏幕)
2.支持Sass mixins自由调用,并结合自己预定义的css，js类，用来创建各种形状和尺寸的布局
(2)原理：
1.栅格系统提供了集中内容居中,水平填充网页的方法,使用.container作为父盒子
2.内部由行(.row)和列(.col)组成，每行都有水平的padding值,行则用于控制他们的间距,同行在负边距的行上低效，从而实现列中的所有内容在视觉上市左侧对齐的体验
3.网页开发者的呈现内容必须放置在列(.col-*)中,而且只有列可以是行的直接子元素,否则都是违法的,不可以在.co-以上添加呈现内容
4…col-后面有不同的数学,如.col-sm-4或col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量,每行最多有12列,如果你想要三个等宽的列,则12的三分之一,既col-sm-4
5，.col的width属性(既列宽)使用百分比来表达和定义的，所以他们总是流式的，其尺寸大小受父元素的定义影响
6.总共有五个栅格系统,每个响应式分界点隔出一个等级,特小.col,小.col-sm-,中.col-md-*大col-lg-，特大col-xl-
7。在Bootstrap 4中，屏幕的大小是真正的“断点”，即如果只定义一个屏幕规格即可向上覆盖所有设备，向下如果没有定义则默认为12栅格占位
8.col-md-auto 在中盒子里面加这个类的说明他列的宽度由他的内容决定
9.如果在一行内子DIV定义的栅格总数超过12列，BootStrap会在保留列完整的前提下，将无法平行布局的多余列，重置到下一行，并占用一个完整的新行。
10.一般换行推荐使用添加多个.row来达成，否则你可以使用系统提供的.w-100方法处理，其思路是强行插入一个width:100%的DIV进行隔离切断
代码：
<div class='container'>
<div class='row'>
<!-- 注意：这里的col和col-4的一样的因为你没有写-4，默认用12除以3结果一样 -->
<div class="col">第一部分</div>
<div class="col">第二部分</div>
<div class="col">第三部分</div>
</div>
</div>
<div class='container'>
<!-- 注意：这里的col-8加col-4已经是12.第三部分会在新的一行显示-->
<div class='row'>
<div class="col-8">第一部分</div>
<div class="col-4"></div>第二部分</div>
<div class="col-2">第三部分</div>
</div>
</div>
<div class='container'>
<!-- 注意：这是不同屏幕下不同的分布-->
<div class='row'>
<div class="col-sm-5 col-md-4 col-lg-2">第一部分</div>
<div class="col-sm-5 col-md-4 col-lg-2">第二部分</div>
<div class="col-sm col-md-4 col-lg-2">第三部分</div>
</div>
</div>
<div class='container'>
<!-- 注意：这是让每一列的内容在行里面如何显示，这里的align-items-center是垂直居中，justify-content-center，要父盒子有高度才可以-->
<div class='row align-items-center justify-content-center'>
<div class="col-md">第一部分</div>
<div class="col-md">第二部分</div>
<div class="col-md">第三部分</div>
<div class="col-md">第四部分</div>
</div>
</div>
间隙消除
代码：no-gutters
<div class='container'>
<div class='row align-items-center justify-content-center no-gutters'>
<div class="col-md">第一部分</div>
<div class="col-md">第二部分</div>
<div class="col-md">第三部分</div>
<div class="col-md">第四部分</div>
</div>
</div>
重排序
Class顺序重定义
使用 .order-* class选择符，可以对DIV空间进行 可视化排序,系统提供了.order-1到.order-1212个级别的顺序，在五种浏览器和设备宽度上都能生效。
div class="container">
<div class="row">
<div class="col">
1号空间-未定义序号，位置不变。
</div>
<div class="col order-12">
2号空间-排最后。
</div>
<div class="col order-1">
3号空间-放第1但受1号空间不变影响居第2位。
</div>
</div>
</div>
还可以使用.order-first，快速更改一个顺序到最前面，同时其它元素也相应的获得了order:-1的属性，这个属性也可以与。.order-*混合使用。
<div class="container">
<div class="row">
<div class="col">
1号空间-未定义顺序。
</div>
<div class="col">
2号空间-未定义顺序。
</div>
<div class="col order-first">
3号空间-优先排序，占第1位。
</div>
</div>
</div>
列偏移
使用.offset-md-类可以使列向右偏移，通过定义的数字，则可以实现列偏移，如.offset-md-4则是向右偏移四列。这个可以让栅格系统变的更加灵活
列嵌套
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）数量推荐不要超过12个（其实，没有要求你必须占满12列-否则应对页面进行重新规划布局）。
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
