Bootstrap的h1标题使用.text-muted强调样式以及内置small副标题

Bootstrap的h2标题使用.text-primary强调样式以及内置strong加粗标签

Bootstrap的h3标题使用.text-success强调样式以及内置em斜体标签

Bootstrap的h4标题使用.text-info强调样式、.text-center对齐样式

Bootstrap的h5标题使用.text-warning强调样式、.text-right对齐样式
Bootstrap的h6标题使用.text-danger强调样式

Bootstrap的p段落文本演示、这里的.text-justify两段对齐样式无表现

Bootstrap的p段落文本带.lead突出样式演示

下面是Bootstrap中列表的运用

  1. Bootstrap的ol有序列表
  2. Bootstrap的ol有序列表

下面是使用ul无序列表配合.list-unstyled\.list-inline样式实现内联横排效果

下面是Bootstrap中对代码的表现形式

第一种是<code>风格

  第二种pre风格会将其中的空格也表现出来  并且可以使用.pre-scrollable样式来实现340px后的滚动条

第三种是<kbd>形式,体现为高亮模式

下面是Bootstrap中表格的运用

表格基础样式 类型 颜色样式 类型
.table 基础表格 .success 表示成功或者正确的行为
.table .table-striped 斑马线表格 .info 表示中立的信息或行为
.table .table-bordered 带边框的表格 .warning 表示警告,需要特别注意
.table .table-hover 鼠标悬停高亮的表格 .danger 表示危险或者可能是错误的行为
.table .table-condensed 紧凑型表格 .active 表示当前活动的信息
.table .table-responsive 响应式表格 none 默认样式

下面是Bootstrap中表单的运用


添加带有.help-block样式的span标签,作为提示信息
添加带有.help-block样式的span标签,作为提示信息
添加带有.help-block样式的span标签,作为提示信息

下面是Bootstrap中图片的运用

默认图片 .img-rounded圆角图片 .img-circle圆形图片 .img-thumbnail缩略图片 .img-responsive响应式图片

下面是Bootstrap中网格的运用

网格外套.container样式
用.row样式分栏
用.col-md-*定列
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
自适应宽度模式(最小)
宽度大于768px
宽度大于992px
宽度大于1200px
.col-md-offset-*向右移动列位
.col-md-push-*向右移动列位
.col-md-pull-*向左移动列位
右边有一个嵌套网格
这是一个
内嵌的
三列网格

下面是Bootstrap中下拉菜单的运用

下面是Bootstrap中按钮组的运用




.btn-group-justified 等分按钮 .btn-group-lg .btn-group-sm .btn-group-xs

下面是Bootstrap中导航的运用

下面是Bootstrap中导航条的运用

.label-default .label-primary .label-success .label-info .label-warning .label-danger

下面是Bootstrap中缩略图的运用

.caption描述内容

这里是描述内容的具体段落信息

cancel sumbit

.caption描述内容

这里是描述内容的具体段落信息

cancel sumbit

.caption描述内容

这里是描述内容的具体段落信息

cancel sumbit

.caption描述内容

这里是描述内容的具体段落信息

cancel sumbit

下面是Bootstrap中警示框的运用

.alert .alert-success成功的警示框信息
.alert .alert-info中立的警示框信息
.alert .alert-warning警告的警示框信息
.alert .alert-danger失败的警示框信息
.alert .alert-success成功的警示框信息 使用.alert-dismissable样式
.alert .alert-info中立的警示框信息 添加一个样式为.close样式的button按钮
.alert .alert-warning警告的警示框信息 button添加data-dismiss属性
.alert .alert-danger失败的警示框信息 内容为alert
这是加重文字以及.alert-link样式的a链接

下面是Bootstrap中进度条的运用

45%

下面是Bootstrap中媒体对象的运用

媒体对象的运用

外层嵌套.media样式的div容器,内部放置一个带有.pull-left样式的a链接,其中包含带有.media-object样式的img图像。与之并列的是带有.media-body样式的div容器,其中又包含带有.media-heading样式的h4标题标签。之后用一个div容器包裹内容。

这是嵌套在媒体对象里的媒体对象

实现的方式是将整个媒体对象容器嵌套在之前的media-body里,同media-heading和内容div相并列。

这是又一个更里层的嵌套

这是嵌套的内容,这种模式经常在评论页面出现。

下面是Bootstrap中列表组的运用

.list-group-item-heading头样式

.list-group-item-text内容样式

自定义列表组嵌套在div标签里

子标签放在a标签里

下面是Bootstrap中面板的运用

.panel-heading面板头样式
面板组件使用div标签,外套.panel样式,以及.panel-default默认样式,这里是.panel-body面板体样式
彩色面板 样式
蓝色面板 .panel-primary
绿色面板 .panel-success
浅蓝面板 .panel-info
橙色面板 .panel-warning
红色面板 .panel-danger
面板内嵌列表组
内嵌表格或列表组想要去除边界都应和body体并列

下面是Bootstrap中模态弹出框的运用

下面是Bootstrap中滚动监控器的运用

HOME

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

ABOUT

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

WORK

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

CONTACT

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

下面是Bootstrap中选项卡的运用

内容方面使用.tab-content样式
每个子项内容使用.tab-pane样式
需要注意的是id的使用和引用
如果是a链接可以直接使用,否则使用data-target
在nav上引用id还要带上data-toggle=“tab”属性

下面是Bootstrap中提示框的运用

下面是Bootstrap中弹出框的运用

下面是Bootstrap中按钮拓展的运用

下面是Bootstrap中手风琴的运用

折叠面板一
折叠面板二
折叠面板三

下面是Bootstrap中图片轮播的运用