首先附上Bootstrap中文文档 http://v3.bootcss.com/
简介：包含基本结构、css、组件、JavaScript插件、定制。
下面我们开始讲Bootstrap3使用方法：
<!DOCTYPE html> 为了支持HTML元素和CSS属性，项目开头必须包含此字段。移动端自适应：1.https://github.com/amfe/lib-flexible 移动端的自适应方案，CDN引用---------不是bootstrap的插件 2.Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。<meta name="viewport" content="width=device-width, initial-scale=1.0"> bootstrap移动设备的友好支持方案 建立浏览器一致性：Bootstrap 使用 Normalize 来建立跨浏览器的一致性。一、css1.网格系统：class container>row>col-xs-3/col-sm-3/col-md-offset-3/.col-md-push-*/ .col-md-pull-* xs 浏览器像素宽度小于768px sm 大于等于768px md 大于等于992px lg 大于等于1200px2.Bootstrap 的排版特性：可以创建标题、段落、列表及其他内联元素。 附上链接不赘述。http://www.runoob.com/bootstrap/bootstrap-typography.html 3.代码显示使用code 或 pre标签；注意内部代码使用硬编码 < 和 >。4.表格系统：class table-hover → 悬停变色 浅灰色 table-striped → 条纹 table-condensed→ 行内边距padding变为一半，表格更紧凑 背景颜色class active success warning danger 响应式表格class table-responsive>table 5.表单布局： 垂直基本表单 <form role="form"> > form-group（<div>） 获取最佳间距 > form-group(所有文本元素) 内联表单 <form role="form" class='form-inline'> 在使用内联表单时，您需要在表单控件上设置一个宽度。 使用 class .sr-only，您可以隐藏内联表单的标签。 水平表单 <form role="form" class='form--horizontal'> > form-group（<div>） > control-lable(<lable>) 按钮样式： btn default/primary/success info/waring/danger/link lg/sm/xs/btn-block active/disabled图片样式：img-round圆角图片IE8不支持 /img-circle圆形图片IE8不支持 /img-thumbnail灰色内边框 / img-responsive图片响应式文本样式：text-muted/text-primary/text-success/text-info/text-warning/text-danger 文本背景样式：bg-primary/bg-success/bg-info/bg-warning/bg-danger 其他： pull-left/pull-right/center-block/clearfix/show/hidden/sr-only/sr-only-focusable/text-hide/close/ caret(下拉)二、布局组件：1.使用图标：<span class="glyphicon glyphicon-search"></span> 图标class在此网站找http://getbootstrap.com/components/#glyphicons 2.下拉菜单： 下拉菜单（Dropdown） JavaScript 插件 的互动实现 class .dropdown > dropdown-menu( pull-right 使下拉菜单向右对齐) > dropdown-header3.按钮组： Bootstrap 按钮（Button） 插件 class btn-toolbar > btn-group(btn-group-vertical 实现垂直按钮组) > btn-group-lg/btn-group-sm/btn-group-xs 4.按钮下拉菜单：class btn-group > button && class dropdown-menu > divider (分离链接)5.导航元素： 标签式导航： nav nav-tab nav-justified(导航菜单与父元素等宽) > disabled(禁用链接和hover效果) 胶囊导航： nav nav-pills nav-stacked(胶囊垂直堆叠) nav-justified(导航菜单与父元素等宽)6.导航栏： 内容较多 ，结构较复杂。参考网站http://www.runoob.com/bootstrap/bootstrap-navbar.html 面包屑导航： breadcrumb 7.分页： 默认： pagination > active/disabled 翻页链接状态： pager > previous/next disabled8.徽章： badge9.超大屏幕：class .jumbotron 容器 为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class10.页面标题： page-header11.缩略图： 图片加容器 thumbnail12.警告： 父级容器添加class alert alert-success/alert-info/alert-warning/alert-danger alert-dismissable(取消警告，样式保留) 请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素 结构：div > button 进度条、多媒体对象、列表组、面板组、well参考网站三、插件 http://v3.bootcss.com/javascript/ 参照官网学习
转载于:https://www.cnblogs.com/xiaoxixier/p/5539102.html
相关资源：Bootstrap3中文文档(v3.0.3)