Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。它不是单一的CSS或JavaScript框架,而是完整的HTML、CSS、JavaScript框架,你可以仅通过Bootstrap简单、快速的开发移动设备优先的响应式布局页面和应用。
一 Bootstrap简介
1,bootstrap文件目录
你可以在Bootstrap官网,下载不同版本的文件包,现在最新的版本是4.3.x。解压文件后有两个子文件夹,CSS和JS,他们的目录如下:
所有文件都有普通版和压缩版。.min的即是压缩版,去除了空白字符等,使文件更小。.map是Source map文件,需要特定的工具才可以使用。关于Source map文件详细情况可以参考这里阮一峰博客。或戳这里。
bootstrap.css是Bootstrap的核心CSS文件,一般根据需要选择bootstrap.css或bootstrap.min.css即可。bootstrap-grid.css是Bootstrap提供的单独使用其栅格系统的CSS文件。bootstrap.reboot.css则仅做引导(初始化)文件使用。核心CSS文件包含了grid和reboot文件。
bootstrap.js是Bootstrap提供的核心JS文件,而bootstrap.bundle.js与bootstrap.js相比,新增了Pooper.js,根据需要选择你需要的JS文件即可。pooper.js主要用于元素定位,详情可以查看https://popper.js.org/。
2,文件引入
你可以通过两种方式引入bootstrap框架,本地和CDN。
CSS引入如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 为了实现移动设备优先,你应该有以上meta标签 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
JS引入:
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2 <!-- bootstrap依然基于jQuery,并不是像前两年网上有些人吹的那样,bootstrap将放弃jQuery。所以你必须优先引入jQuery -->
3 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
4 <!-- popper.js单独引入 -->
5 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
6 <!-- bootstrap.js单独引入 -->
3,初始化CSS
Bootstrap尽量使用rem为单位,以获得不同尺寸屏幕上都能够获得更好的显示比例。
Bootstrap移除了大多数元素的margin-top属性,减少margin折叠(塌陷)。
Bootstrap把所有元素的box-sizing属性都设置为border-box,防止padding和border使盒子变形。
Bootstrap把html元素的font-size重置为16px,body设置为1rem,其他元素尽量使用inherit值继承font-size属性。
Bootstrap把标题的margin-bottom重置为0.5rem,段落的margin-bottom重置为1rem。
Bootstrap使用用户系统自带的字体,而不是硬性规定。
4,浏览器兼容性
Bootstrap支持所有主流浏览器的较新版,包括使用WebKit,Blink或Gecko内核的第三方浏览器(比如360,世界之窗,QQ浏览器等)。
对于IE浏览器,很遗憾,官方推荐使用IE10及之后的版本。如果你希望在IE10以前的版本上运行Bootstrap开发的网页或应用,那么你可能需要使用Bootstrap 3.x或以前版本。
二 栅格系统
Bootstratp把网页划分成一个个网格,每一行有12列,根据需要可以设置多行。在一行中,通过flex布局实现每一列占用的空间自适应。通过Bootstrap提供的栅格系统,我们可以轻松满足各种形状和尺寸的布局。
1,启用栅格系统
Bootstrap通过.container或.container-fluid类启用bootstrap的栅格系统,该类通常添加在第一祖先元素上,理论上.container可以相互嵌套,但不建议这么做。.container设置元素左右有固定的15px padding,左右自适应margin,从而居中显示元素。
1 <div class="container"></div>
2 <!-- 启用栅格系统就这么简单 -->
与之对应的.container-fluid类则使用100%,尽量占满其父元素内的可用宽度,用的较少。
1 <div class="container-fluid"></div>
2,行与列
Bootstrap通过.row来新增一行,.row采用最新的flex布局。同一行中你可以添加最多12列,.col-*表示一列,每一列在水平方向上都有30px padding,并且都使用百分比定义宽度,所以它们总是流式的呈现,并随父元素宽度的变化而变化。
1 <div class="container">
2 <div class="row">
3 <div class="col-*"></div>
4 </div>
5 </div>
请注意,在栅格系统中,只有.col-*是合法的.row的直接子元素,.row的直接子元素不能是其他任何内容,否则可能会破坏整个栅格系统,带来意想不到的结果。
你可以直接用1 -- 12 的数字代替.col-*后面的星号,表示希望该列占用的宽度。如果你想让每一列均分宽度,你可以直接设置.col,或设置相同的数字(12除以列数)。
1 <div class="container">
2 <div class="row">
3 <div class="col-8">我大概占66.7%</div>
4 <div class="col-4">我大概占33.3%</div>
5 </div>
6 </div>
如果每一行中列的数字之和大于12,那么超出的部分将换行,你虽然可以在换行的位置插入一个.w-100实现多行,但我们不建议这样做。如果确实需要换行,建议新增一个.row。
1 <div class="row">
2 <div class="col-8">col</div>
3 <div class="w-100"></div>
4 <div class="col-8">col</div>
5 </div>
3,屏幕断点
Bootstrap为了适应不同尺寸的屏幕,利用CSS媒体查询功能,对不同尺寸的屏幕做了断点设置。其中前缀xl代表超大屏幕(大屏),lg代表大屏幕(普通显示器),md代表中等屏幕(较小显示器),sm代表小屏幕(pad),无前缀则代表超小屏幕(手机)。
超小屏幕 (新增规格)<576px |
小屏幕 次小屏≥576px |
中等屏幕 窄屏≥768px |
大屏幕 桌面显示器≥992px |
超大屏幕 大桌面显示器≥1200px |
|
---|---|---|---|---|---|
.container 最大宽度 |
None (auto) | 540px | 720px | 960px | 1140px |
类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
bootstrap断点的特点是:如果把列的宽度设置在某一断点上,那么屏幕宽度大于或等于该断点值的设备都会被应用该设置,而小于该断点值的设备将不会被应用。根据这个特点,我们可以只定义一个屏幕尺寸,即可以向上覆盖所有尺寸的设备。
1 <div class="row">
2 <div class="col">col</div>
3 <div class="col">col</div>
4 </div>
5 <div class="row">
6 <div class="col-8">col-8</div>
7 <div class="col-4">col-4</div>
8 </div>
4,混合使用屏幕断点
如果你想让同一个网页在不同尺寸的设备上有不同的表现,那么你可以混合使用bootstrap的屏幕断点。
1 <div class="row">
2 <div class="col-12 col-md-8"></div>
3 <div class="col-6 col-md-4"></div>
4 <!-- 在超小屏幕上一列全宽,一列半宽,其他尺寸则以8:4的比例呈现 -->
5 </div>
5,对齐
在.row行上使用.align-items-*可以方便的控制行在容器内的垂直方向上的对齐方式。在.col-*列上使用.align-self-*控制列在水平方向上的对齐方式。
1 <div class="container">
2 <div class="row align-items-start">
3 <div class="col align-self-start">
4 第一列
5 </div>
6 <div class="col align-self-center">
7 第二列
8 </div>
9 <div class="col align-self-end">
10 第三列
11 </div>
12 </div>
13 <!-- align-items-start:上对齐;align-items-center:中对齐;align-items-end:下对齐 -->
14 <!-- align-self-start:左对齐;align-self-center:居中对齐;align-self-end:右对齐>
由于Bootstrap栅格系统基于flex实现,所以你还可以在.row行上使用justify-content-*来规定.col-*列在水平方向上的对齐方式(justify-content实际是flex布局中使用的属性,用来规定内容块在主轴方向的分布)。flex布局请戳这里《CSS定位与布局》4.4。
1 <div class="container">
2 <div class="row justify-content-start">
3 <div class="row justify-content-center">
4 <div class="row justify-content-end">
5 <div class="row justify-content-around">
6 <div class="row justify-content-between">
7 </div>
8 <!-- 他们依次表示左对齐,居中,右对齐,内容块间隔相等,两端对齐 -->
6,清除间隙
我们知道,bootstrap的行和列水平方向上都有30px的padding值,如果你不希望它存在,bootstrap提供了.no-gutters类。
1 <div class="container no-gutters">
2 <div class="row">
3 <div class="col"></div>
4 </div>
5 </div>
6 <!-- 放在.container上清楚行和列的padding,放在.row上则只清楚列的padding -->
7,列的重排序
默认状况下,列会根据代码编写顺序依次呈现,基于flex,bootstrap提供了.order-*来自定义显示顺序,星号可以是1 -- 12的数字,数字越小,显示优先级越高。
1 <div class="container">
2 <div class="row">
3 <div class="col">
4 未定义序号,位置不变。
5 </div>
6 <div class="col order-12">
7 12号排最后。
8 </div>
9 <div class="col order-1">
10 1号排在12号之前
11 </div>
12 </div>
13 </div>
14 <!-- 重排序的元素只能在他们之间确立优先级,而不能影响为重排序的元素 -->
如果你临时起意,在行的末尾新增了一列,又想让它优先显示,那么你可以使用.order-first。
三 CSS基础样式
Bootstrap初始化了很多CSS样式,使我们拥有了一个简洁的、优雅的页面基础。基本的HTML元素均通过添加class设置样式并得到增强效果;还有先进的栅格系统用于页面布局。
1,标题和段落
Bootstrap重新定义了基本的全局显示、排版、以及链接样式。
首先是标题,你可以直接使用新的h1 -- h6标签,或给标题标签设置.display-1 -- .display-4类,以获取更大的显示效果。也可以使用.h1 -- .h6 class属性呈现标题样式。当然,那样并不符合web语义化规范。
1 <h1 class="display-2">
2 我是 bootstrap h1
3 <small class="text-muted">我是副标题</small>
4 </h1>
5 <p class="h1">我是拥有bootstrap h1 样式的p</p>
你还可以通过small标签来添加副标题,通过添加.text-muted类让副标题的颜色更浅一点。
其次是段落,你可以通过.lead样式来突出显示部分内容。.text-right或。text-center设置文本右对齐或居中。.text-truncate可以在文本容器宽度不足时显示省略号。
1 <p class="lead text-right text-truncate">我很重要我很重要。。。(很多内容)</p>
对footer使用.blockquote-footer来获得更好的引用备注效果。
1 <blockquote class="blockquote">
2 <p>爱上一个地方,就应该背上包去旅游,走得更远。</p>
3 <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
4 </blockquote>
.list-inline清除列表样式和左边距,.list-inline-item则把列表元素设置为行类块级元素。配合使用可以使列表横向展示。
1 <ul class="list-inline">
2 <li class="list-inline-item">列表一</li>
3 <li class="list-inline-item">列表二</li>
4 <li class="list-inline-item">列表三</li>
5 </ul>
2,图片和表格
Bootstrap通过.img-fluid实现图片响应式特征,图片大小会随着父元素大小同步缩放。使用.img-thumbnail装饰图片,实现缩略图效果,实际就是加了个边框和一点padding。
1 <img src="url" alt="..." class=" img-fluid img-thumbnail">
Bootstrap通过.table重新定义了表格的基本样式,你可以通过.table-dark来实现表格背景和文字颜色的反转效果。通过.table-striped实现条纹状表格。
1 <table class="table table-dark table-striped">
2 </table>
如果只是想对表头做一些改变,那么你可以使用.thead-light或.thead-dark让表头背景呈现浅黑色或深灰色。
1 <table class="table">
2 <thead class="thead-linght">
3 </thead>
4 </table>
另外,你还可以通过.table-bordered或.table-borderless来设置或取消表格的边框。通过.table-hover产生鼠标悬停效果。
1 1 <table class="table table-bordered table-hover">
2 2 </table>
3,文本
使用text-*的方式规定文本对齐方式,星号的取值可以是任意text-align属性的可选值。另外,你还可以通过text-sm-*、text-lg-*等来创建响应式的字体对齐方式。
1 <p class="text-right">右对齐</p>
2 <p class="text-sm-left">在sm及以上的屏幕显示为左对齐</p>
另外,你可以在文本上应用的样式有:.text-wrap(可换行),.text-nowrap(不可换行),.text-truncate(超出文本显示省略号),.text-lowercase(转换为小写),.text-uppercase(转换为大写),.text-capitalize(单词首字大写),.text-decoration-none(清楚装饰)等等。
4,颜色
Bootstrap通过主题颜色来传达一些信息,包括元素的不同状态。
1 <p><a href="#" class="text-primary">重要的</a></p>
2 <p><a href="#" class="text-secondary">次要的</a></p>
3 <p><a href="#" class="text-success">成功的</a></p>
4 <p><a href="#" class="text-danger">危险的</a></p>
5 <p><a href="#" class="text-warning">警告的</a></p>
6 <p><a href="#" class="text-info">信号的</a></p>
7 <p><a href="#" class="text-light bg-dark">高亮的</a></p>
8 <p><a href="#" class="text-dark">暗沉的</a></p>
9 <p><a href="#" class="text-muted">暗淡的</a></p>
10 <p><a href="#" class="text-white bg-dark">白色的</a></p>
同样的,背景颜色也是类似的通过主题颜色在不同的场景传递不同的信息。不过背景颜色是通过bg-*d的方式。
5,显示模式
Bootstrap通过.d-*的方式制定元素显示模式。通过.d-none隐藏元素。
1 <div class="d-inline">我变成行内元素了</div>
2 <div class="d-none">我被隐藏了</div>
3 <!-- 星号的取值可以是:inline,inline-block,block,table,table-cell,table-row,flex,inline-flex -->
同时你也可以指定响应式的显示模式。
1 <div class=".d-sm-none .d-md-block">在sm屏幕上隐藏,其他的都显示</div>
2 <div class=".d-block .d-sm-none">只在xs屏幕上可见</div>
6,浮动与清除
Bootstrap通过.float-*来设置元素浮动,你当然也可以通过.float-*-*来指定响应式的浮动规则。
1 <div class="float-sm-left">在sm屏幕上左浮动</div><br>
2 <div class="float-md-left">在md屏幕上左浮动</div>
清楚浮动bootstrap只提供了一种方式.clearfix:通过伪元素实现清除浮动。
1 <div class="clearfix">
2 <div class="float-left">左浮动</div>
3 </div>
四 功能组件
Bootstrap提供了无数可以复用的组件,包括字体图标、下拉菜单、导航、警告条、弹出框等更多功能。
1,警告提示
警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供常见的上下反馈消息和提示。首先你应该指定元素的.alert类,然后再根据警报种类(主题)选择合适的颜色控件。
1 <div class="alert alert-primary"></div>
2 <div class="alert alert-secondary"></div>
3 <div class="alert alert-success"></div>
4 <div class="alert alert-danger"></div>
5 <div class="alert alert-warning"></div>
6 <div class="alert alert-info"></div>
7 <div class="alert alert-light"></div>
8 <div class="alert alert-dark"></div>
9 <!-- 警报实际上是一组颜色控件,共八种-->
2,标识
Bootstrap通过.badge来实现标识信息,标识也可以通过.badge-*来指出特定的主题信息。
1 <h1>用于标题<span class="badge badge-pramiry">New</span></h1>
2 <button>用于按钮 <span class="badge badge-secondary">2</span></button>
3 <a>用于链接<span class="badge badge-warning"></span></a>
你还可以通过.badge-pill获得更大的圆角,这会使元素看起来像椭圆形的。
3,痕迹导航
在通过BootStrap的内置CSS样式,自动添加分隔符、并呈现导航层次和网页结构结构,从而指示当前页面的位置为用户提供优秀用户体验。
1 <nav>
2 <ol class="breadcrumb">
3 <li class="breadcrumb-item"><a href="#">Home</a></li>
4 <li class="breadcrumb-item active" aria-current="page">Library</li>
5 </ol>
6 </nav>
7 <!-- 通过.breadcrumb设置导航栏, .breadcrumb-item设置子选项,.active设置当前活动选项-->
4,按钮
Bootstrap自定义了按钮样式,并广泛用于表单、对话框等场景中的操作,并支持多种大小和状态。Bootstrap包括多个预定义的按钮样式,每个样式都有自己的语义目的。
1 <button type="button" class="btn btn-primary">Primary</button>
2 <button type="button" class="btn btn-secondary">Secondary</button>
3 <button type="button" class="btn btn-success">Success</button>
4 <button type="button" class="btn btn-danger">Danger</button>
5 ...
<!-- 你也可以在input标签上应用这些样式 -->
如果你不喜欢带有背景颜色的按钮,你可以使用.btn-outline-*来构建轮廓按钮(只有一个带圆角的边框)。
1 <button type="button" class="btn btn-outline-primary">Primary</button>
2 <button type="button" class="btn btn-outline-secondary">Secondary</button>
3 <button type="button" class="btn btn-outline-success">Success</button>
4 <button type="button" class="btn btn-outline-danger">Danger</button>
5 ...
此外,你还可以通过.btn-lg、.btn-sm来创建更大或更小的按钮,disabled属性或.active类来定义按钮是禁用状态或启用状态。
5,下拉菜单
下拉菜单是网页开发经常永达ode一个组件,通过bootstrap即可轻松实现。
1 <div class="dropdown">
2 <button class="btn btn-success btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
3 下拉按钮
4 </button>
5 <div class="dropdown-menu">
6 <h6 class="dropdown-header">HTML</h6>
7 <a class="dropdown-item active" href="#">CSS</a>
8 <a class="dropdown-item" disabled href="#">JavaScript</a>
9 <div class="dropdown-divider"></div>
10 <a class="dropdown-item" href="#">其他</a>
11 </div>
12 </div>
通过.drop*创建一个下拉菜单,*是一个方位名词,可以是top,down,left,right其中一个,表示菜单将出现在什么方位。按钮上你可以通过.btn-*来设置按钮大小、主题颜色等,dropdown-toggle生成一个三角形小图标。使用下拉菜单时,data-toggle="dropdown"是必须的属性。
通过.dropdown-menu设置菜单,.dropdown-header设置菜单标题,.dropdown-item设置菜单项,.dropdown-divider创建分割线。
6,进度条
Bootstrap进度条没有使用HTML5的<progress>实现,而是通过两个div和一些类实现。
1 <div class="progress">
2 <div class="progress-bar progress-bar-striped" style="width:20%">20%</div>
3 </div>
通过.progress创建进度条的底,.progress-bar表示当前进度,style设置当前进度值。你还可以通过。.progress-bar-striped给当前进度添加条纹样式,如果你在当前进度div中添加了文本,那么它将展示在进度条上。
如果你不需要这些复杂的玩意儿,那么使用HTML5的<progress>标签或许才是更好的选择。
8,加载特效
bootstrap实现了两种加载特效,圆形旋转和圆形渐变气泡。
1 <div class="spinner-border spinner-border-lg text-success" role="status">
2 <span class="sr-only">Loading...</span>
3 </div>
4 <button>
5 <div class="spinner-grow spinner-grow-sm text-danger" role="status">
6 <span class="sr-only"></span>
7 </div>
8 loading...
9 </button>
圆形旋转特效通过.spinner-border创建边框和动画效果,.spinner-border-*设置大小,.text-*设置主题颜色。
圆形渐变气泡通过spinner-grow创建,其余和旋转一样。
9,其他
更多可复用的组件,由于篇幅有限,请查看官方文档。
五 Jquery插件
Bootstrap自带了许多jQuery插件,这极大的丰富了bootstrap的功能,所以如果你需要用到这些插件,并不需要额外的代码,直接引入bootstrap.min.js即可。
Bootstrap许多插件都可以通过HTML标签的data-*属性触发,这也应该是你首选的方式。另外,Bootstrap也提供了仅使用JavaScript(实际是通过jQuery)来使用插件的方式。
虽然Bootstrap提供了许多JS插件和CSS组件,但实际工作中可能用的并不多,个人认为Bootstrap的核心和优势完全在于其栅格系统,其他的作简单了解即可。
写在最后:一般,公司开发不太可能只依赖Bootstrap或其他某一单一库或框架,即使它功能非常强大。实际开发过程中,遇到的可能UI,数据,交互等都采用更有针对性的库或框架,稍有实力的公司甚至有自己内部开发的专用框架。所以,很遗憾,这里没有继续讲解更多关于bootstrap组件库的信息。如果你确实有兴趣或正在使用,请移步Bootstrap中文网继续学习。