Bootstrap，来自Twitter，是目前比较流行的前端框架。Bootstrap是基于HTML、CSS和JAVASCRIPT的。简单灵活，使得Web开发速度更快。[1]它是由Twitter设计师Mark Otto和Jacob Thornton开发的一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它们是由动态CSS语言Less编写的。Bootstrap自推出以来一直很受欢迎，并且一直是GitHub上很受欢迎的开源项目，包括NASA的《MSNBC突发新闻》。[2]国内移动开发者比较熟悉的一些框架，比如WeX5前端开源框架，也是基于Bootstrap源代码进行优化的。

特点：

Bootstrap基于HTML5和CSS3开发，基于jQuery更加个性化和人性化，形成独特的网站风格，兼容大部分jQuery插件。

Bootstrap的学习很简单，提供的风格很漂亮。只需一点简单的学习，你就能做出漂亮的页面。

自举中文网站：http://v3.bootcss.com/.

Bootstrap提供三种类型的下载：

-

生产环境的引导。

并编译压缩后的CSS、JavaScript和字体文件。不包括文档和源文件。

引导程序源代码

少了，JavaScript和字体文件，带文档。需要更少的编译器和一些设置工作。

厚颜无耻

这是Bootstrap从Less到Sass的源代码移植项目，用于快速将其引入Rails、Compass或仅用于Sass的项目。

-

实际上，我们可以不用下载就使用bootstrap:

Bootstrap中文网站专门为Bootstrap打造了自己的免费CDN加速服务。基于国内云厂商的CDN服务，访问速度更快，加速效果更明显，没有速度和带宽限制，永远免费。

base.html

！DOCTYPE html html lang=' zh-CN ' head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' meta name=' viewport ' content=' width=device-width，initial-scale=1 '！-以上三个元标签*必须*在前面，任何其他内容*必须*跟随！-标题引导101模板/标题！-bootstrap-linkrel='样式表' href=' http://cdn . bootscs.com/bootstrap/3 . 3 . 4/CSS/bootstrap . min . CSS '/head myh1你好，bootstrap！/h1！-jQuery(Bootstrap的JavaScript插件所必需的)-script src=' http :http://cdn . bootscss.com/jQuery/1 . 11 . 2/jQuery . min . js '/script！-包含所有编译好的插件(如下图)，或者根据需要包含单个文件-script src=' http :http://cdn . bootscs.com/bootstrap/3 . 3 . 4/js/bootstrap . min . js '/script/body/html base . html，bootstrap已经介绍过了，所以保存下来，我们可以使用bootstrap提供的样式。

字体图标

Bootstrap默认提供200多个图标。我们可以通过span标签使用这些图标：

H3图标/H3 span class='字形图标-家庭'/span span class='字形图标字形图标-信号'/span span class='字形图标字形图标-cog '/span span class=' glyphicon glyphicon-apple '/span span class=' glyphicon glyphicon-垃圾桶'/span span class=' glyphicon glyphicon-play-circle '/span span class=' glyphicon glyphicon-耳机'/span

按钮

按钮/按钮标签用于创建按钮，bootstrap提供了丰富的按钮样式。

h3按钮/h3按钮类型='button' class='btn btn-default '按钮/button button type=' button ' class=' BTN BTN-主' primary/button type=' button ' class=' BTN BTN-成功'成功/button type=' button ' class=' BTN BTN-信息' info/button type=' button ' class=' BTN BTN-警告'警告/button type=' button ' class=' BTN BTN-危险'危险/button H3按钮尺寸/h3按钮类型='button' class='btn btn-default '按钮/button button type=' button ' class=' BTN BTN-初选BTN-LG primary/button type=' button ' class=' BTN BTN-成功BTN-sm ' success/button type=' button ' class=' BTN BTN-信息BTN-xs ' info/button H3把图标显示在按钮里/H3按钮类型=' button ' class=' BTN BTN-default ' span=' glyphicon-home '/span按钮/按钮按钮除了有默认的大小外自举还提供三个参数来调整按钮的大小，分别是：btn-lg、btn-sm和btn-xs。

下拉菜单

下拉菜单是最常见的交互之一自举提供了漂亮的样式。

h3下拉菜单/H3 div class='下拉'按钮class=' BTN BTN-主下拉-切换' type=' button ' id='下拉菜单1 '数据-切换='下拉' aria-expanded=' true '下拉span class='插入符号'/span/button ul class='下拉菜单'角色='演示' a角色=' menuitem ' tabindex='-1 ' href=' # ' Action/a/Li角色='演示' a '

输入框

通过输入/输入标签去创建输入框。

h3输入框/H3 div class=' input-group ' span class=' glyphicon glyphicon-user '/span输入类型=' text '占位符=' username '/div div class=' input-group ' span class=' glyphicon glyphicon-lock '/span输入类型=' password '占位符=' password '/div

导航栏

导航栏作为整个网站的指引必不可少。

h3导航栏/H3导航条导航条-反向导航条-固定顶部div id='导航条' class='导航条-折叠折叠折叠ul class=' nav bar-nav ' Li class=' active ' a href=' # ' Home/a/Li lia href=' # about ' about/a/Li lia href=' # contact ' contact/a/Li class=' drop ' a href=' # ' class=' drop-toggle ' data-toggle=' drop ' role=' button ' aria-expanded='-/。导航-折叠/分区/导航

表单

人与系统之间数据的传递都需要依靠表单来完成。比如注册/登录信息的提交，查询条件的提交等。用形式/形式标签来创建表单。

h3表单/H3表单div '表单-组' span='字体-用户'/span输入类型=' email ' id='示例输入temail 1 '占位符='输入电子邮件'/div class=' form-group ' span class=' glyphicon glyphicon-lock '/span输入类型='密码' id='示例输入密码1 '占位符='密码'/div class='表单组'标签为='范例输入档案'文件输入/标签输入类型='文件' id='/p/div class='复选框'标签输入类型='复选框'签出我/标签/div按钮类型='提交' BTNBTN-默认提交/按钮/表单

警告框

警告框是系统向用户传达信息和提供指引的重要手段。没有针对警告框的标签，通过引导程序所提供的样式可以瞬间制作出漂亮的警告框。

h3警告框/H3 div='警报警报-警告警报-禁用'角色='警报'按钮类型='button' class='close '数据-disable=' alert ' aria-label=' Close ' span aria-hidden=' true '/span/button强警告！/strong最好检查一下自己，你看起来不太好/div class='警报警报-成功'角色=' alert ' a href=' # ' class=' alert-link '成功！/a/div div class=' alert alert-info '角色=' alert ' a href=' # ' class=' alert-link '信息！/a/div class=' alert alert-warning '角色=' alert ' a href=' # ' class=' alert-link '警告！/a/div class=' alert alert-danger '角色=' alert ' a href=' # ' class=' alert-link '危险！/a/div

进度条

系统的处理过程往往需要用户等待，进度条可以让用户感知到系统的处理过程，从而增加容忍度。

h3进度条/H3 div class=' progress ' div class=' progress-bar '角色=' progress bar ' aria-value now=' 70 ' aria-value min=' 0 ' aria-value max=' 100 ' style=' width : 60%；'70% /div /div