Bootstrap自学笔记

最新推荐文章于 2023-10-20 23:07:10 发布

lvandjy

最新推荐文章于 2023-10-20 23:07:10 发布

阅读量918

点赞数

文章标签： css html html5 bootstrap

本文链接：https://blog.csdn.net/weixin_53324535/article/details/120031540

版权

bootstrap文件下面有三个文件夹，分别是css、fonts、js，其中fonts是字体文件夹，需要配合css文件夹一起使用

CSS样式

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意：由于padding等属性的原因，这两种容器类不能互相嵌套。

.container两边会有留一定的padding。

...

</div>

.container-fluid 默认使用当前页面的百分之百。

...

</div>

排版

标题

只要导入了bootstrap中的css外联式样式表，标题就会因为样式表的存在发生改变，并且不需要使用布局容器就可以直接发生改变

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。

并且还会存在副标题，副标题是在主标题以下嵌套的标题，不能单独使用，并且根据标题的不同，副标题的大小也会随之发生改变

另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

页面主体

只要引入了bootstrap的css页面，body里面的内容就是页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428倍（20px）。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

bootstrap直接将body和p全局设置字体为14px

中心内容（突出展示）

由于bootstrap直接将body和p全局设置字体为14px，所以要是想要字体加粗之类的内容，我们可以给标签加上lead类，这样就会显示为突出展示（字体变大，并且要是p标签添加lead类会进行换行）

排版

标签文本：要是想要bootstrap标签高亮，则可以使用mark标签嵌套，这样被mark标签嵌套的文本就会高亮显示

<p>这是<mark>bootstrap</mark>的排版文本</p>

删除文本：要是想要显示被划掉的文本，则可以使用del标签嵌套，这样显示出来的文本就会被横线划掉

<del>这是bootstrap的排版文本</del>

无用文本：和删除文本是一样的作用，但是是将del标签改成s标签嵌套

<s>无用文本：这是bootstrap的排版文本</s>

带下划线文本：就是带下划线的文本，是将u标签将文本包裹住，则显示的就是带下划线的文本

<p><u>插入文本：我是被插入的文本</u></p>

插入文本：就是带下划线的文本，是将ins标签将文本包裹住，则显示的就是带下划线的文本

<p><ins>插入文本：我是被插入的文本</ins></p>

小号文本：使用small标签嵌套的文本就是小号文本，文本内的字体大小会被显示成父容器的85%，并且可以使用.small类来代替small标签

<p><small>小号文本：我是小号的文本</small></p>

<p class="small">小号文本：使用small类表示的小号文本</p>

着重文本：将文本字体加粗，使用strong标签将要加粗的文本包裹

文本对齐：bootstrap里面自动是文本靠左对齐，我们可以使用添加类的方式来改变文本对齐的方式（text-left，text-center，text-right，text-justify，text-nowrap）

<p>bootstrap里面自动是文本靠左对齐，我们可以使用添加类的方式来改变文本对齐的方式</p>

<p class="text-left">bootstrap</p>

<p class="text-center">bootstrap</p>

<p class="text-right">bootstrap</p>

<p class="text-justify">bootstrap</p>

<p class="text-nowrap">bootstrap</p>

改变大小写：通过添加类来改变大小写

大写： text-uppercase

小写： text-lowercase

首字母大写：text-capitalize

<p class="text-uppercase">this is bootstrap</p>

<p class="text-lowercase">this is bootstrap</p>

<p class="text-capitalize">this is bootstrap</p>

缩略语：当鼠标移动到特定的文字上时会显示出部分解释，使用abbr标签来进行嵌套要解释的文本，在abbr的title属性里显示要解释的文字

<p>鼠标移动上去，显示<abbr title="这是缩略语">缩略语</abbr></p>

首字母缩略语：添加initialism类，就是让缩略语的font-size变小一点，没有什么很大的用途

<p>鼠标移动上去，显示<abbr title="这是缩略语" class="initialism">缩略语</abbr></p>

地址样式：最外面首先使用address标签嵌套，然后标签里面使用其他排版标签进行交互

<strong>Lvandjy</strong>

<p>湖北省武汉市洪山区珞狮南路</p>

<p>lvandjy011110@</p>

</address

引用：在文本的左侧出现一个小块，类似于借鉴的意思，使用blockquote标签嵌套住要引用的文本，推荐在blockquote标签里面添加一个p标签来进行引用，要是觉得颜色不好看，可以使用css中的background来调整一下颜色

<p>这是被引用的语句</p>

</blockquote>

列表：bootstrap里面的列表和html一样，并且可以添加两个类，一种是list-unstyled（无样式列表），一种是list-inline（内联列表），无样式列表会取消本列表的样式，但是本列表的子列表的样式不会取消，内联列表会取消样式，并且会形成一排

<li>bootstrap</li>

</ul>

<li>bootstrap</li>

</ul>

栅格系统

栅格系统主要用于页面的布局，并且提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

栅格系统中流式布局：

存在行的概念：将页面中拆分成一行一行

存在列的概念：将页面中拆分的行最多分为12列，并且是等份列

使用栅格系统的注意事项：

1、栅格系统必须包含在容器布局中，.container .container-fluid

2、可以通过添加col-栅格系统设备-占份数（通常推荐栅格系统设备是sm），来进行布局，其中类最后的数字代表占几列，要是是1就是占一列，那样一行可以装下十二个，要是是4就是占四列，那样一行最多可以装三个，要是超出了12列，则会进行另起1行。

3、注意槽宽，槽宽就是padding，每一个槽两边都有15的padding

栅格参数：

栅格系统可以不等份：只要每行不超过12列，可以随意组织排列。

</div>

栅格系统的嵌套：可以将已经分布的列再次进行分割，并且再次分割成12份

</div>

</div>

</div>

列偏移：使用 .col-栅格系统设备 -offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-栅格系统设备-offset-4 类将 .col-栅格系统设备-4 元素向右侧偏移了4个列（column）的宽度。

</div>

代码

就是一些关于代码的样式

内联代码：将部分内容进行类似于代码的样式，将要显示成代码的文字使用code标签包裹

<div><code>System.out.println</code>("Hello Bootstrap")</div>

用户输入：就是将代码加上一个背景颜色，将要加入背景颜色的文字使用kbd标签包裹

代码块：将代码有一个背景颜色，看起来像代码块，使用pre标签将整块代码进行包裹，注意尖括号的转义

<pre><p>Sample text here...</p></pre>

程序输出：将字体进行一点改变，差距不大，使用samp标签将代码块进行包裹

表格使用

bootstrap提供了专门的表格类，在表格的类名上添加table类，bootstrap就会自动渲染成bootstrap提供的样式

基本表格样式：只添加tbale类

没有添加tbale类

添加table类

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

条纹状表格：呈现成斑马线一样，一条灰色一条白色，但是要在table的基类上添加table-striped类

带边框表格：让表格带边框，要在table的基类上添加table-bordered类

鼠标悬停（鼠标悬停变色）：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

紧缩表格：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

状态列：在列/行上添加类，从而使每一列/行都可以有单独的样式（鼠标移动改变颜色）

Class	描述
.active	鼠标悬停在行或单元格上时所设置的颜色（灰色）
.success	标识成功或积极的动作（绿色）
.info	标识普通的提示信息或动作（蓝色）
.warning	标识警告或需要用户注意（黄色）
.danger	标识危险或潜在的带来负面影响的动作（红色）

按钮

为a,button,input标签添加按钮类，便可以使用bootstrap样式，并且btn btn-default是所有按钮的基类，要是像加上其他的样式就要在有btn和btn-default的基础上添加其他的样式类

生成按钮的几种方式：a标签，input标签，button标签

<button class="btn btn-default" type="submit">Button</button>

带有预定义样式的标签：以btn为基类，再在后面通过添加预定义样式类来为按钮添加颜色。预定义样式类：btn-xxx primary蓝色，succeed绿色，info天蓝色，警告黄色，危险红色，链接白色

<button type="button" class="btn btn-default">（默认样式）Default</button>

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

不同尺寸的按钮：使用 .btn-lg（超大）、.btn-sm（小） 或 .btn-xs（超小） 就可以获得不同尺寸的按钮，并且可以给按钮添加.btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

<p>

<button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>

<button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>

</p>

<p>

<button type="button" class="btn btn-primary">（默认尺寸）Default button</button>

<button type="button" class="btn btn-default">（默认尺寸）Default button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>

<button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>

</p>

<p>

<button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>

<button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>

</p>

<p>

<button type="button" class="btn btn-block">块级元素按钮</button>

</p>

状态：

激活状态是按钮的底色更深、边框夜色更深、向内投射阴影，需要让其表现出同样外观的时候可以添加 .active 类

<p>

</p>

禁用状态是呈现出无法点击的效果，通过添加 disabled 属性，使其表现出禁用状态

<p>

</p>

图片

响应式图片：使图片可以随着浏览器宽度的改变得到响应，通过添加.img-responsive就可以实现

图片形状：给图片添加 img-rounded，img-circle，img-thembnail类，可以改变图片形状，并且主要是将图片的圆角发生改变

表单

在bootstrap中的表单里形容的标签需要被label标签嵌套，比如说正常表单中写的是：

用户名:<input type="text" name="username">

但是在bootstrap中用户名需要使用label标签嵌套，并且要给label标签中添加for属性，for属性的内容是input标签的id值

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

</div>

基本表单（垂直表单）：

其中input中的placeholder属性是标签的默认显示字体

<form>

</div>

</div>

<label>

<input type="checkbox" name="aihao">看书

</label>

<label>

<input type="checkbox" name="aihao">睡觉

</label>

<label>

<input type="checkbox" name="aihao">吃饭

</label>

</div>

</form>

内联表单（一行表单）：在bootstrap中，表单的默认样式是垂直表单，要是想让表单变成一行内容显示的表单，只需要在from标签里添加form-inline类

</div>

</div>

</form>

水平表单：先要在form标签添加form-horizontal类，然后再和栅格系统进行搭配，才能得到好的效果

1、form加入class=”form-horizontal”

2、在form-group中使用栅格系统

3、label必须加入class=”control-label”使label中的字体靠右

</div>

</div>

</form>

被支持的控件

输入框：包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

文本域：支持多行文本的表单控件，可根据需要改变rows属性

</div>

复选框单选框：多选框（checkbox）用于选择列表中的一个或多个选项，而单选框（radio）用于从多个选项中只选择一个，可以通过给input的父类的label的父类div添加disabled类，和给input添加disabled类从而实现禁止选取的状态

<h3 class="text-center">单选框复选框</h3>

<label>

<input type="checkbox" value="">看书

</label>

</div>

<label>

<input type="checkbox" value="">学习

</label>

</div>

<label>

<input type="checkbox" value="" disabled>睡觉

</label>

</div>

<label>

<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>男

</label>

</div>

<label>

<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">女

</label>

</div>

<label>

<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>保密

</label>

</div>

下拉列表：使下拉列表实现成bootstrap提供的样式，并且对于标记了 multiple 属性的 <select> 控件来说，默认显示多选项

<label for="citys" class="col-sm-2 control-label">请选择城市</label>

</select>

</div>

静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。

<p class="form-control-static">email@example.com</p>

</div>

组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。并且组件都是放在fonts文件夹内，并且要导入css类才能使用

字体图标

出于性能的考虑，所有图标都需要一个基类（glyphicon）和对应每个图标的类。注意：为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

1、所有字体图标都有一个基类 glyphicon 使用对应图标类

2、不能与任何bootstrap中其他的类联合使用，必须单独创建一个span标签嵌套，通过span进行图标使用

3、并且字体图标只会对内容为空的span起作用

4、要是想要使用对应的图标，只需要去bootstrap官网找到组件板块，去查找是什么类，直接复制类过去

<p>这是一个箭头图标 <span class="glyphicon glyphicon-menu-left"></span> </p>

并且字体图标不仅仅可以放在文本里面，还可以放在按钮里面

下拉菜单

由于下拉菜单需要使用js文件，但是bootstrap的js是以jquery为基础，所以我们要首先导入jquery文件，在导入bootstrap的js文件

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

并且一个下拉菜单有两个部分，一部分是下拉按钮（需要通过data-toggle="dropdown"），一部分是下拉菜单（需要添加dropdown-menu类）

1、通过dropdown容器包裹下拉按钮和下拉菜单

2、下拉菜单加入dropdown-menu样式

3、下拉按钮加入data-toggle=”dropdown”展示菜单和隐藏菜单

</ul>

</div>

分割线：如果想在下拉菜单加一个分割线，只需要在下拉菜单的li里加上一行li，并且添加divider类，就可以实现分割线功能。

禁用选项：为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

菜单标题：如果想要给下拉菜单的选项进行分类，则可以给li标签添加dropdown-header类，来给菜单的选项添加一个标题

上拉菜单：上拉菜单和下拉菜单核心代码是一样的，只是将最外层的dropdown改成了dropup

</ul>

</div>

按钮组

通过按钮组容器（.btn-group ）把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。并且按钮组和独立按钮的最大的差别就是独立按钮之间有缝隙，但是按钮组之间没有缝隙

</div>

按钮组工具栏：在按钮组之外在使用容器.btn-toolbar包裹两个及以上的按钮组，即可组成一个按钮组工具栏

</div>

</div>

调整按钮组尺寸：只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。（*就是尺寸大小，分别为：lg，sm,xs）

</div>

按钮组嵌套：可以将下拉菜单添加到按钮组里去，但是需要把下拉菜单的.dropdown改成.btn-group

</ul>

</div>

垂直排列按钮组：让按钮组垂直排列，只需要.btn-group类换成.btn-group-vertical类就可以将按钮组垂直排列

</div>

自适应按钮组：让按钮组自适应屏幕的宽度，只需要给按钮组添加.btn-group-justified 就可以了，但是必须是使用a标签的按钮，不能使用input标签的按钮

</div>

按钮下拉菜单：

</ul>

</div>

分裂式下拉菜单：

</ul>

</div>

就是将多个input并且不同type类型（按钮、文本框）组合在一起，是用来美化文本框的。需要使用.input-group 来包裹住from-group里面的所有input，要是想要再input标签前面添加文本，则再input前面使用span标签，标签内加上要显示的文本，然后给span标签并且可以不需要最外层的.form-group添加 .input-group-addon 并且可以不需要最外层的.form-group

</div>

</form>

实例：

</div>

</div>

改变尺寸：为 .input-group 添加相应的尺寸类（input-group-sm小, input-group-lg大），其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类

</div>

</div>

</div>

输入框中加入其他元素：可以将多选框或单选框作为额外元素添加到输入框组中。将多选框或者单选框放在span标签内

</div>

放入按钮：将span的input-group-addon改成input-group-btn，并且将sapn里面的内容修改成按钮并且添加样式

</div>

放入下拉菜单：再span标签里面添加一个下拉菜单就可以，并且下拉菜单的dropdown容器可以存在也可以不写，并且不写也可以是按钮和文本框之间的距离更小

</ul>

</span>

</div>

导航条

导航条不需要记住，只需要在要使用的时候去官网复制粘贴，学会修改导航条就可以了

导航条是页面最上方的导航栏，需要使用bootstrap提供的nav标签，还要给nav标签添加.navbar和.navbar-default，再在nav标签里使用栅格系统，要是使用container就是两边不留白，要是使用container-fluid则两边都有留白

</div>

</nav>

导航条分为两个部分，分别是navbar-header（标题）和navbar-collapse（导航条的所有内容），并且navbar-collapse需要使用collapse基类。

导航条标题：

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">班级管理系统</a>

</div>

导航栏主体：除了导航条标题，就只剩下导航条的组件了

<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

aria-expanded="false">Dropdown <span class="caret"></span></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

<li><a href="#">One more separated link</a></li>

</ul>

</li>

</ul>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"

aria-expanded="false">Dropdown <span class="caret"></span></a>

<li><a href="#">Action</a></li>

<li><a href="#">Another action</a></li>

<li><a href="#">Something else here</a></li>

<li><a href="#">Separated link</a></li>

</ul></li></ul></div>

品牌图标：将导航条内放置品牌标志的地方替换为 <img> 元素即可展示自己的品牌图标。由于 .navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。并且要把图片宽高设置成20*20的

</a>

</div>

</nav>

组件排列：通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过 CSS 设置特定方向的浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的 <ul> 标签里。

最好使用ul来进行组件的排列，并且给ul添加.nav.navbar-nav

放入表单：将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。

按钮：对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法，例如， aria-label、aria-labelledby 或者 title 属性。如果这些方法都没有，屏幕阅读器将使用 placeholder 属性（如果这个属性存在的话），但是请注意，使用 placeholder 代替其他识别标签的方式是不推荐的。

文本：把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。

非导航的链接：或许你希望在标准的导航组件之外添加标准链接，那么，使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。

<li>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

</li>

<li>

<li>

<p class="navbar-text">Signed in as Mark Otto</p>

</li>

<li>

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a>

</p>

</li>

</ul>

固定在顶部：添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

...

</div>

</nav>

固定在底部：添加 .navbar-fixed-bottom 类可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

...

</div>

</nav>

静止在顶部：通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器，用于将导航条居中对齐并在两侧添加内补（padding）。

...

</div>

</nav>

反色的导航条：通过添加 .navbar-inverse 类可以改变导航条的外观。

...

</nav>

路径导航

在一个带有层次的导航结构中标明当前页面的位置。给ol标签添加breadcrumb类就可以实现，并且ol下面的li需要嵌套a标签，要是是当前页面还需要添加状态类active，而且被active的li标签不能有a标签

<li><a href="#">Library</a></li>

</ol>

分页工具栏

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

默认分页

默认分页是写在nav标签所嵌套的ul标签里面，并且要给ul标签添加.pagination类，ul里面使用li>a来构建，a标签里面添加翻页的页码，而且向前/后翻页按钮是通过特殊符号来实现

<nav>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</nav>

选用和禁用状态：链接在不同情况下可以定制。可以给不能点击的链接的li标签添加 .disabled 类、给当前页添加 .active 类

<nav>

</ul>

</nav>

尺寸：给ul标签添加.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸

翻页

简单翻页，用简单的标记和样式，就能做个上一页和下一页的简单翻页。

同样使用nav标签嵌套ul标签，给ul标签添加.pager，ul标签内使用li>a标签，再在a标签里面写入内容，并且是默认居中

<nav>

</ul>

</nav>

翻页两端对齐：给li标签添加.previous实现左边对齐，添加.next实现右边对齐

</ul>

</nav>

可选禁用状态：给li标签添加.disabled可是实现禁用状态

<nav>

<li class="previous disabled"><a href="#">Older</a></li>

<li class="next"><a href="#">Newer</a></li>

</ul>

</nav>

徽章

给链接、按钮等元素嵌套 <span class="badge"> 元素，可以很醒目的展示新的或未读的信息条目。

<a href="#">Inbox <span class="badge">42</span></a>

Messages <span class="badge">4</span>

</button>

修改徽章颜色：a标签的徽章需要自己手动在style标签里面更改backgroud-color属性来修改，button标签的徽章通过改变按钮的background-color来改变

胶囊式导航的徽章：将胶囊式导航的徽章里面通过嵌套span标签并添加badge类也可以实现胶囊式导航有未读消息等效果

<li><a href="#">Profile</a></li>

<li><a href="#">Messages <span class="badge">3</span></a></li>

</ul>

巨幕

能延伸至整个浏览器视口来展示网站上的关键内容（给当前的页面添加一个灰色的背景，然后添加一些文字填充）

巨幕最外面使用一个div并且添加.jumbotron，然后在div里写上自己想填充的文字

<h1>Hello, world!</h1>

<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>

</div>

也可以使用巨幕来包括其他的组件，从而形成自己想要的效果

页头

使用div标签并且添加.page-header，然后就和h1标签和small标签搭配使用，效果会比h1标签和small标签搭配稍微好看点，添加了下划线

</div>

缩略图

缩略图是放在栅格系统里面的，只需要在栅格系统里面使用a标签添加.thumbnail类再嵌套住img就可以实现了，多放几个栅格就可以实现一排缩略图

自定义样式缩略图：先将a标签替换成div标签，并且也要添加thumbnail类，里面再添加一个div，并且给div添加caption类，再在caption里添加其他的组件，比如说按钮和p标签，就可以组成一个好看的缩略图

<p>第一排文字</p>

</div>

</div></div>

警告框

做出提示作用，使用div并且添加基类.alert，然后再使用其他的装饰类来进行修饰，警告内容直接写在div里

具有关闭功能的警告框：为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮。这个按钮要写在警告框的前面，并且不能添加.btn.btn-warning，而是添加.close，还要再按钮里面通过<span>×</span>来构建一个叉号，并且要在按钮中加入data-dismiss="alert"才能具有关闭的效果

<strong>Warning!</strong> 点击右侧按钮可以关闭警告

</div>

警告框中的链接：在警告框中添加a标签，再用 .alert-link 工具类，可以为链接设置与当前警告框相符的颜色。

这是一个<a href="#" class="alert-link">链接</a>

</div>

进度条

首先需要一个div当成容器，并且添加.progress类，在容器里面还要使用div，添加.progress-bar类，需要使用css来设置百分比宽度，在div里面加入百分比，这里的百分比需要和css中的宽度百分比一样

30%

</div>

更换颜色：给div.progress-bar再添加一个progress-bar-xxx类

90%

</div>

60%

</div>

100%

</div>

条纹状进度条：给div..progress-bar再添加一个progress-bar-striped类，就可以显示成条纹状的。

100%

</div>

动画条纹状进度条：为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果

90%

</div>

堆叠效果：把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

<span class="sr-only">35% Complete (success)</span>

</div>

<span class="sr-only">20% Complete (warning)</span>

</div>

<span class="sr-only">10% Complete (danger)</span>

</div>

列表组

通过一个个ul和li组成的,会默认占容器的百分之百，列表组list-group，列表项list-group-item

<li class="list-group-item">Spring</li>

<li class="list-group-item">Redis</li>

<li class="list-group-item">Bootstrap</li>

</ul>

带徽章的列表组：将徽章嵌套再列表组里就可以了

<li class="list-group-item">Spring <span class="badge">2</span></li>

<li class="list-group-item">Redis <span class="badge">22</span></li>

<li class="list-group-item">Bootstrap <span class="badge">23</span></li>

</ul>

按钮列表组：列表组中的元素也可以直接就是按钮（也同时意味着父元素必须是 <div> 而不能用 <ul> 了），并且无需为每个按钮单独包裹一个父元素。注意不要使用标准的 .btn 类！

<button class="list-group-item">Spring</button>

<button class="list-group-item">Redis</button>

<button class="list-group-item">Bootstrap</button>

</div>

链接列表组：和按钮列表组一样，将ul改成div，再将button改成a标签

<a href="#" class="list-group-item active">Spring</a>

<a href="#" class="list-group-item">Redis</a>

<a href="#" class="list-group-item">Bootstrap</a>

</div>

被禁用的条目：为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果。

<a href="#" class="list-group-item active">Spring</a>

<a href="#" class="list-group-item disabled">Redis</a>

<a href="#" class="list-group-item">Bootstrap</a>

</div>

情景类：为列表中的条目添加情境类（list-group-item-xxx success,danger,info等等），默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态。

<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>

<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>

<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>

<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>

</ul>

<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>

<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>

<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>

<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>

</div>

定制内容：列表组中的每个元素都可以是任何 HTML 内容，比如说list-group-item-heading(头部)，list-group-item-text(文本)

<h4 class="list-group-item-heading">List group item heading</h4>

</a>

</div>

面板

不是必须的内容，但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况，可以试试面板

面板是将文字放在一个div里，然后这个div里面会有内补和边框，面板的基类.panel，然后需要加上其他的修饰类（情景效果：如：panel-default，panel-xxx success info warning danger）,并且有了面板容器之后不能直接将面板内容写在面板容器里面，需要写在panel-body里面

Basic panel example

</div>

带标题的面板：通过 .panel-heading 可以很简单地为面板加入一个标题容器。也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签，添加一个预定义样式的标题。不过，<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。并且面板容器中的panel-xxx是控制面板边框和标题的背景色的

带脚注的面板：把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色，因为他们并不是主要内容。

<h3 class="panel-title">Panel title</h3>

</div>

Panel content

</div>

<p>Footer content</p>

</div>

带表格的面板：为面板中不需要边框的表格添加 .table 类，是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板，我们为表格的上方添加一个边框，看上去有分隔效果。

<div class="panel-heading">Panel heading</div>

</div>

</table>

</div>

面板中嵌套列表：和嵌套table一样，直接将table.table更换成ul.list-group，li标签也要添加list-group-item

<div class="panel-heading">Panel heading</div>

</div>

</ul>

</div>

JavaScript插件

每一个JavaScript组件都有三个属性：参数、方法、事件，只要具体了解一个组件的使用方法其他的组件使用方法套娃就行

事件使用：对应组件选择器.on(事件名，事件处理函数)

模态框 modal

模态框就是类似于一个对话框，并且默认再屏幕上创建的静态的模态框是不可以展示的，要是想要展示则要调用模态框js插件。

html主体：直接再官网拷贝就可以，不需要特意的去记，会改就可以了。

</div>

<p>主体内容，也可以是表单等等…</p>

</div>

</div>

方法：因为模态框是modal，所以js的绑定方法也是使用

.modal(options)

$(“模态框id”).modal({

参数列表

})

参数：

$("#myModal").modal({

show : true,//展示模态框

backdrop : false,// 点击旁边区域不关闭模态框

keyboard : false,// 点击键盘上esc键不能关闭对话框

})

默认设置会直接导致一点开页面就直接打开模态框，所以我们可以创建一个按钮，然后给按钮绑定事件，通过点击按钮来展示模态框

<button id="btn" class="btn btn-primary">显示模态框</button>

$("#btn").click(function (e) {

e.preventDefault();

$("#myModal").modal({

show: true,//展示模态框

})

});

.modal('toggle')

手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中也是通过按钮为媒介（模态框里面一个，页面外面一个），从而可以实现状态之间的切换

.modal('show') .modal('hide')

是参数形式show:true/show:hide的简写，再页面主体/模态框中添加一个按钮，然后点击按钮触发$(“myModal”).modal(“show”)/.modal(“hide”)

事件：

事件类型	描述
show.bs.modal	Show方法点击之后就执行
shown.bs.modal	Show方法已经完全展示之后执行
hide.bs.modal	hide 方法调用之后立即触发该事件。
hidden.bs.modal	Hide方法完全隐藏之后执行该事件

$('#myModal').on('hidden.bs.modal', function (e) {

// 当发生事件时触发的函数

})

注意：

１、在一张页面中不支持同时打开多个模态框，也千万不要在一个模态框中嵌套另一个模态框

２、务必将模态框的 HTML 代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现或功能。

只是用css的组件来写导航栏是不可以发生改变的，而且组件只有第一部分（标签选项卡ul.nav.nav-tabs），需要通过选项卡面板(div.tab-content)来进行一一对应，而且选项卡中的div.tab-pane标签也要绑定id，然后选项卡中的a标签的href属性要绑定选项卡的id来进行控制，还要给a标签绑定事件data-toggle=”tab”

</ul>

</div>

方法：

.tab('show')通过点击某个按钮来触发展示事件，并且绑定的是选项卡组件的id，不是选项卡面板的id

// 点击按钮触发事件

$("#btn").click(function (e) {

e.preventDefault();

// 注意调用的选项卡按钮的id,并不是选项卡面板的id

$("#btn1").tab("show");

});

事件：也是给对应的选项卡绑定事件，不是给选项卡面板绑定事件

事件类型	描述
show.bs.tab	选项卡展示
shown.bs.tab	选项卡彻底展示
hide.bs.tab	选项卡隐藏
hidden.bs.tab	选项卡彻底隐藏

并且这里要注意，由于绑定的是a标签事件，而且a标签会有很多data-toggle元素，所以再事件绑定的时候要通过事件选择器筛选一下，明确是a标签还绑定了data-toggle=”tab”的标签才可以

// 只有书写成a[data-toggle='tab']才能彻底明确是a标签帮绑定了data-toggle='tab'

$("a[data-toggle='tab']").on("show.bs.tab", function () {

})

手风琴 Collapse

不需要特地去记，只需要在使用的时候从官网复制就可以了，默认是占满显示器宽度的，一般都是和栅格系统搭配使用

手风琴1

</a>

</h4>

</div>

<!-- 手风琴标题所对应的内容，.in类的用途是一点进页面就是默认展示

-->

手风琴1内容

</div>

轮播图Carousel

轮播图是给最外面的div添加.carousel.slide类，并绑定data-ride=”carousel”事件，还要设置id

</div>

</div>

</div>

</div>

</div>

</div>

</ol>

</a>

</a>

</div>

lvandjy

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap自学笔记

bootstrap文件下面有三个文件夹，分别是css、fonts、js，其中fonts是字体文件夹，需要配合css文件夹一起使用<metaname="viewport"content="width=device-width,initial-scale=1.0"><linkrel="stylesheet"hr...
复制链接

扫一扫