排版样式

页面排版

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为20px; p段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。
创建包含突出的段落文本 (class="lead")

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

标题

Bootstrap 框架 36px

Bootstrap 框架 30px

Bootstrap 框架 24px

Bootstrap 框架 18px

Bootstrap 框架 14px
Bootstrap 框架 12px

普通内联样式中也可以使用 class="h1~h6"定义

内联样式被定义成h1 内联样式被定义成h2 内联样式被定义成h3 内联样式被定义成h4

在标题元素中插入 small 元素

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

Bootstrap 框架

内联文本元素

mark元素或.mark 类 字体颜色会变成#000颜色 还有一个非常浅的背景颜色

Bootstrap 框架

各种加线条的文本

Bootstrap 框架 //删除的文本
Bootstrap 框架 //无用的文本
Bootstrap 框架 //插入的文本
Bootstrap 框架 //效果同上，下划线文本

各种强调文本

Bootstrap 框架 //标准字号的 85%
Bootstrap 框架 //加粗 700
Bootstrap 框架 //倾斜

对齐

设置文本对齐

居左 text-left

居中 text-center

居右 text-right

两端对齐,支持度不是太好 text-justify

文本字体坚决不换行 text-nowrap

大小写

设置字体大小

Bootstrap框架 text-lowercase 全部小写

Bootstrap 框架 text-uppercase 全部大写

Bootstrap框架 text-capitalize 首字母大写

缩略语

和原有标签没有什么区别 在里面多出来的initialism类 就是设置了一下 字体是原有字体的90%和全大写

The PRC was founded in 1949.

地址文本

给address元素 去掉了倾斜，设置了行高，底部 20px

Twitter, Inc.
　　795 Folsom Ave, Suite 600
　　San Francisco, CA 94107
P: (123) 456-7890

引用文本

对与 blockquote元素增加了做边线，设定了字体大小和内外边距

Bootstrap框架
Bootstrap框架 blockquote-reverse

列表排版

移出了默认样式 list-unstyled

内联样式 list-inline(横着显示)

水平排列描述列表 dl-horizontal

Bootstrap
Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

代码

内联代码

<section>

提醒用户输入组合按键

请按 Ctrl + Shift + S 保存

代码块

<p>Please input...</p>

表格和按钮

表格

基本表格样式 class="table"

1 2 3
4 5 6

条纹表格样式 table table-striped

1 2 3
1 2 3
1 2 3
1 2 3
1 2 3

带边框的表格 table table-bordered

1 2 3
1 2 3
1 2 3
1 2 3
1 2 3

鼠标悬停的表格 table table-hover

1 2 3
1 2 3
1 2 3
1 2 3
1 2 3

带有状态的表格 在tr或者td中加入 success成功顺利 danger禁止 info提示信息 warning警告注意 active鼠标悬停在行或单元格上

1 2 3
1 2 3
1 2 3
1 2 3
1 2 3

隐藏某一行 sr-only

1 2 3
4 5 6

隐藏某一行 sr-only

1 2 3
4 5 6

按钮

btn-default 普通按钮 btn-success 成功样式(绿色) btn-info 一般信息样式(浅蓝) btn-warning 警告样式(黄色) btn-danger 危险样式(红色) btn-primary 首选项样式(深蓝) btn-link 连接样式
btn-lg 大按钮 btn 默认 btn-sm 小按钮 btn-xs 超小按钮







块级按钮

btn-block 块级按钮

激活按钮 和 禁用按钮

active 激活按钮 disabled 禁用按钮

表单和图片

表单

普通表单 form-group组

内联表单

备注:当小于 768px，会恢复独占样式

表单组合

增加前后片段

￥
.00

邮箱
@

水平排列

复选框和单选框

复选框点击文字也可以使用 checkbox

复选框点击文字也可以使用 在lable里面checkbox-inline

下拉列表框

在原有的select元素里面加入 form-control类

校验状态

has-error错误状态 has-success成功状态 has-warning警告状态
lable标签同步出现状态 需要在标签里面 control-label

添加额外的图标

文本框右侧内置文本图标 在父级元素中加入 has-feedback 在input元素下面加入span元素form-control-feedback

控制尺寸大小

input-lg大控件 input-sm小控件

图片

不同的表现形式 img-rounded圆角 img-circle圆形切图 img-thumbnail有圆角框的矩形图片

图片 图片 图片

响应式图片

图片

栅格化系统

创建最多 12 列的响应式行

1
2
3
4
5
6
7
8
9
10
11
12

总列数都是 12，每列分配多列

1-4
5-8
9-12
1-8
9-12

四种屏幕分类全部激活 容器的自适应宽度为：超小屏(<768px)、小屏(>=768px)、中屏(>=992px)和大屏(>=1200px)
col-lg-3 如果大于1200 占12份中的3份 也就是4列
col-md-4 如果大于992 占12份中的4份 也就是3列
col-sm-6 如果大于768 占12份中的6份 也就是2列
col-xs-12如果小于768 占12份中的12份 也就是1列

4
4
4
4
4
4
4
4
4
4
4
4

可以设置列偏移，让中间保持空隙 col-md-offset-1 便宜一行

8
3

嵌套 占满12行 形成网页排版模式(在嵌套方法中嵌套进去的栅格也是12个计算)

1-8
9-12
11-12

两个列交换位置，push 向左移动(col-md-push-3)，pull 向右移动(col-md-pull-9)

9
3

辅助类和响应式工具

关闭按钮 在最右面 class="close"

三角符号 caret

快速浮动 pull-left pull-right

左面

右面

块级居中 center-block

块级居中

取消浮动 clearfix

<div class="clearfix"></div>

显示和隐藏 class="show" class="hidden"

show

响应式工具

在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。

图标菜单和按钮组件

小图标

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-eur
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous
  • glyphicon glyphicon-cd
  • glyphicon glyphicon-save-file
  • glyphicon glyphicon-open-file
  • glyphicon glyphicon-level-up
  • glyphicon glyphicon-copy
  • glyphicon glyphicon-paste
  • glyphicon glyphicon-alert
  • glyphicon glyphicon-equalizer
  • glyphicon glyphicon-king
  • glyphicon glyphicon-queen
  • glyphicon glyphicon-pawn
  • glyphicon glyphicon-bishop
  • glyphicon glyphicon-knight
  • glyphicon glyphicon-baby-formula
  • glyphicon glyphicon-tent
  • glyphicon glyphicon-blackboard
  • glyphicon glyphicon-bed
  • glyphicon glyphicon-apple
  • glyphicon glyphicon-erase
  • glyphicon glyphicon-hourglass
  • glyphicon glyphicon-lamp
  • glyphicon glyphicon-duplicate
  • glyphicon glyphicon-piggy-bank
  • glyphicon glyphicon-scissors
  • glyphicon glyphicon-bitcoin
  • glyphicon glyphicon-btc
  • glyphicon glyphicon-xbt
  • glyphicon glyphicon-yen
  • glyphicon glyphicon-jpy
  • glyphicon glyphicon-ruble
  • glyphicon glyphicon-rub
  • glyphicon glyphicon-scale
  • glyphicon glyphicon-ice-lolly
  • glyphicon glyphicon-ice-lolly-tasted
  • glyphicon glyphicon-education
  • glyphicon glyphicon-option-horizontal
  • glyphicon glyphicon-option-vertical
  • glyphicon glyphicon-menu-hamburger
  • glyphicon glyphicon-modal-window
  • glyphicon glyphicon-oil
  • glyphicon glyphicon-grain
  • glyphicon glyphicon-sunglasses
  • glyphicon glyphicon-text-size
  • glyphicon glyphicon-text-color
  • glyphicon glyphicon-text-background
  • glyphicon glyphicon-object-align-top
  • glyphicon glyphicon-object-align-bottom
  • glyphicon glyphicon-object-align-horizontal
  • glyphicon glyphicon-object-align-left
  • glyphicon glyphicon-object-align-vertical
  • glyphicon glyphicon-object-align-right
  • glyphicon glyphicon-triangle-right
  • glyphicon glyphicon-triangle-left
  • glyphicon glyphicon-triangle-bottom
  • glyphicon glyphicon-triangle-top
  • glyphicon glyphicon-console
  • glyphicon glyphicon-superscript
  • glyphicon glyphicon-subscript
  • glyphicon glyphicon-menu-left
  • glyphicon glyphicon-menu-right
  • glyphicon glyphicon-menu-down
  • glyphicon glyphicon-menu-up

下拉菜单

下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。注意:必须引入JQuery文件,而且JQuery文件还要在bootstrap.js前面

声明式用法的关键核心： 1.外围容器使用 class="dropdown"包裹； 2.内部点击按钮事件绑定 data-toggle="dropdown"； 3.菜单元素使用 class="dropdown-menu"。


.dropup 菜单可以向上打开 .dorpdown 菜单可以向下打开
.dropdown-menu-right 菜单可以在右面显示打开
在li里面加入 .dorpdown-header 可以实现给菜单加一个标题 不要有a超链接标签,在插入一个li标签 .divider可以实现有个分割线

按钮组组件

基本格式 .btn-group 按钮组 .btn-group-vertical可以垂直排列按钮组 .btn-group-justified可以设置两端对齐按钮组(两端对齐按钮组要用a标签)

左 中 右

将多个按钮组整合起来便于管理 .btn-toolbar

嵌套一个菜单 在做下拉菜单的时候一定要把下拉按钮和下拉元素做一个.btn-group组里面 不然会出现下拉列表偏移

导航组件

导航组件

基本导航组件 .nav-tabs 禁用.disabled

胶囊导航组件 .nav-pills

垂直胶囊导航 .nav-pills .nav-stacked

两端对齐胶囊导航 .nav-pills .nav-justified

导航条组件

两种基本导航 默认导航 navbar-default(灰白色) 反转颜色navbar-inverse(黑色)

导航 包括标题列表和表单 方位:.navbar-right右 .navbar-left左

面包屑导航分页标签和徽章组件

面包屑导航

面包屑导航 .breadcrumb

  1. 首页
  2. 列表页
  3. 详情页

分页

分页 .pagination 首选项.active 禁用.disabled 尺寸.pagination-lg大 默认不写 .pagination-sm小 .pagination-xs超小

翻页效果 .pager

对齐翻页链接 .pager 还要在li面写入.previous上一页 .next下一页

徽章组件

未读信息数量徽章

信息12

按钮徽章

激活状态自动适配色调

巨幕页头缩略图和警告框组件

巨幕

.jumbotron

网站标题

这是一个学习性的网站！

更多内容

标题

.page-header 大标题用HN标签 小标题用small标签

大标题 小标题

缩略图

响应式缩略图

自适应图文并茂

图文并茂

这是一个图片结合文字的缩略图

进入

图文并茂

这是一个图片结合文字的缩略图

进入

图文并茂

这是一个图片结合文字的缩略图

进入

图文并茂

这是一个图片结合文字的缩略图

进入

警告框组件

警告框组件是一组预定义消息。

Bootstrap
Bootstrap
Bootstrap
Bootstrap

警告框组件带关闭按钮

警告框组件带关闭按钮是一组预定义消息。

Bootstrap ×
Bootstrap ×
Bootstrap ×
Bootstrap ×

Well 组件、进度条组件、媒体对象组件

Well组件

嵌入效果 .well

Bootstrap

有 .well-lg 和 .well-sm 两种可选值

Bootstrap
Bootstrap

进度条

基本进度条 两个div 第一个 .progress 第二个 .progress-bar

60%

最低值进度条

0%

结合情景的进度条 .progress-bar-primary .progress-bar-danger .progress-bar-info .progress-bar-warning .progress-bar-success

40%
60%
80%
90%
99%

条纹进度条 .progress-bar-striped

40%
60%
80%
90%
99%

动画进度条 .active

40%
60%
80%
90%
99%

堆叠效果

10%
20%
30%

媒体对象组件

媒体对象在左面 三个div 第一个总div .media 第二个是内部div .media-left 第三个内部div .media-body 标题用.media-heading

标题

《星月夜》，也被译为《星夜》（The Starry Night） （荷兰语：De sterrennacht）是荷兰后印象派画家文森特·梵高于1889年在法国圣雷米的一家精神病院里创作的一幅著名油画，是梵高的代表作之一，现藏纽约现代艺术博物馆。有种普遍的说法，由于这是梵高在精神病时期所作，世人普遍认为这是梵高想象出来的美妙情景。

媒体对象在右面

标题

《星月夜》，也被译为《星夜》（The Starry Night） （荷兰语：De sterrennacht）是荷兰后印象派画家文森特·梵高于1889年在法国圣雷米的一家精神病院里创作的一幅著名油画，是梵高的代表作之一，现藏纽约现代艺术博物馆。有种普遍的说法，由于这是梵高在精神病时期所作，世人普遍认为这是梵高想象出来的美妙情景。

媒体列表 .media-list

列表组面板和嵌入组件

列表组

列表组 .list-group 列表组带徽章.badge 列表组首选.active 禁用.disabled 情景.list-group-item-success(成功) [success、info、warning、danger、primary]

按钮列表组

组合其他模式

内容标题

这里是相关内容详情！

内容标题

这里是相关内容详情！

内容标题

这里是相关内容详情！

面板组件

面板组件.panel 面板有情景.panel-default、.panel-success、.panel-info、.panel-warning、.panel-danger、.panel-primary
面板头部.panel-heading 面板头部中也可以使用.panel-title来定义标题 面板内容.panel-body 面板底部.panel-footer

面板标题

面板头部
这里是详细内容区！
1 2 3
1 2 3
面板底部

模态框插件

模态框插件

模态框源代码
使用模态框的弹窗组件需要三层 div 容器元素:分别为 modal(模态声明层)、dialog(窗口声明层)、content(内容层)。
在内容层里面，还有三层，分别为 header(头部)、body(主体)、footer(注脚)。

        
        <div class="modal show" tabindex="-1">
            <!-- 窗口声明 -->
            <div class="modal-dialog">
                <!-- 内容声明 -->
                <div class="modal-content">
                    <!-- 头部 -->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span>×</span>
                        </button>
                        <h4 class="modal-title">会员登录</h4>
                    </div>
                    <!-- 主体 -->
                    <div class="modal-body">
                        <p> 暂时无法登录会员 </p>
                    </div>
                    <!-- 注脚 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default"> 注册 </button>
                        <button type="button" class="btn btn-primary"> 登录 </button>
                    </div>
                </div>
            </div>
        </div>

点击触发模态框

弹窗大小 弹窗的大小有三种，默认情况下是正常，还有 .modal-lg(大)和 .modal-sm(小)

淡入淡出效果 在最外面的div加上.fade

在主体部分使用栅格系统中的流体

滚动监听插件

滚动监听

滚动监听 data-offset默认为10固定内容距容器10像素以内,就高亮显示所对应的菜单 data-spy 设置scroll讲内容设置为监听 data-target 设置#nav绑定制定监听的菜单

HTML5

标准通用标记语言下的一个应用 HTML 标准自 1999 年 12 月发布的 HTML4.01后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006 年， 双方决定进行合作，来创建一个新版本的 HTML。

Bootstrap

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的， 它简洁灵活， 使得 Web 开发更加快捷。 [1]它由 Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。[2]国内一些移动开发者较为熟悉的框架，如 WeX5前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。[3]

JQuery

JQuery 是继 prototype 之后又一个优秀的 Javascript 库。 它是轻量级的 js库 ，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+） ，jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用） 、 events、 实现动画效果， 并且方便地为网站提供 AJAX交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页面保持代码和 html 内容分离， 也就是说， 不用再在 html 里面插入一堆 js 来调用命令了， 只需要定义 id 即可。

Vuejs

Vue.js（读音 /vjuː/, 类似于view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

AngularJS

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

标签页工具提示插件

标签页

标签页 也可以换成胶囊式.nav-pills 也可以淡入淡出 .fade in active

HTML
Javascript
Java
PHP

工具提示

写完HTML部分还需要用js方式来加以调用一下 $("#alink").tooltip();

link 鼠标放到link上

弹出框和警告框插件

弹出框

写完HTML部分还需要用js方式来加以调用一下

警告框

警告框 data-dismiss="alert" 淡入淡出加上 fade in

警告：您收到一种不明的警告！

高级按钮和折叠插件

按钮切换

单个按钮切换 切换点击状态 按下状态和没有被点击状态 注：在 Firefox 多次页面加载时，按钮可能保持表单的禁用或选择状态。解决方案是：添加 autocomplete="off"。

单选按钮

data-toggle="buttons"

多选按钮

data-toggle="buttons"

折叠

隐藏层 点击打开隐藏 再次点击隐藏

Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS/HTML 框架。目前,Bootstrap 最新版本为 3.0

手风琴效果

点击我进行展示，再点击我进行折叠，第一部分

这里是第一部分。

点击我进行展示，再点击我进行折叠，第二部分

这里是第二部分。

点击我进行展示，再点击我进行折叠，第三部分

这里是第三部分。

轮播图

轮播图