1.BootStrap介绍
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
2.BootStrap安装与使用
2.1 安装
安装请去BootStrap中文网:Bootstrap中文网
2.2 使用
BootStrap在html中引用:
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件 -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="js/jquery-3.4.1.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>
3.布局容器和栅格网格系统
3.1布局容器——.container 类
.container与.container_fluid是bootstrap中的两种不同类型的外层容器。官方对二者的描述为:
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的。无论何种情况下,请不要手动为响应式布局中的外层布局容器设置固定宽度值。.container-fluid自动设置为外层视窗的100%,如果外层视窗为body,那么它将全屏显示,无论屏幕大小,并且自动实现响应式布局。
<!-- 固定宽度,两侧会有留白 -->
<div class="container">
<p>...</p>
</div>
<!-- 占据全部视口(viewport),不会有留白 -->
<div class="container-fluid">
<p>...</p>
</div>
3.2栅格网格系统
注意:网格系统必须使用到CSS
BootStrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,BootStrap系统会自动分为最多12列。栅格系统用于通过一系列的行(row)或列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出来强大的响应式网格系统。BootStrapu框架中的网格系统就是将容器平分成12份。
container、row、xs(xsmall phones){超小屏(自动)},sm(small tablets){小屏(750px)},md(middle desktops){中屏(970px)},lg(laege desktops){大屏(1170px)},
行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和padding(内边距)。在行(.row)中可以添加列(.column), 只有列(column)才可以作为行容器(.row)的直接子元素,但列数之和不能超过平分的总列数12。如果大于12,则自动换到下一行。
具体内容应当放置在列容器之内。
3.2.1 列组合:
列数加起来不能超过12,超过12则会换到下一行
3.2.2 列偏移:
在列元素上添加类名"col-md-offset-X"(其中X代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。但是总数不超过12
<div class="container">
<div class="row">
<div class="col-md-1">1列</div>
<div class="col-md-1">2列</div>
<div class="col-md-1 col-md-offset-8">11列</div>
<div class="col-md-1">12列</div>
</div>
</div>
3.2.3 列排序:
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在BootStrap框架的网格系统中是通过添加类名 col-md-push-X 和 col-md-pull-X (其中X代表移动的列组合数)。往前pull,往后push。如果目的地有其他的东西,就会被覆盖
3.2.4 列嵌套:
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内