Bootstrap应用核心

 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中文网继续学习。

posted @ 2019-10-28 14:44  任风来去匆匆  阅读(931)  评论(4编辑  收藏  举报