Bootstrap
2016-11-15 19:57:34 0 举报AI智能生成
Bootstrap是一个开源的前端开发工具包，它提供了一套用于快速构建响应式网站和Web应用的用户界面组件。通过使用Bootstrap，开发者可以轻松地创建出具有一致风格和布局的网站，而无需从头开始编写代码。Bootstrap包含了丰富的CSS样式、JavaScript插件以及HTML模板，使得开发者可以更加高效地进行开发工作。此外，Bootstrap还具有良好的兼容性和可扩展性，可以与各种主流的浏览器和设备无缝集成。总之，Bootstrap是一个非常实用的前端开发工具，它为开发者提供了一种简单而强大的方法来构建现代化的网站和应用。
作者其他创作
大纲/内容
简介
集成HTML CSS JS前端框架
优势
节省时间
响应式布局
易用
浏览器兼容性好
开源免费
布局与排版
网格系统
将窗体划分为12列
设备尺寸
大尺寸 >=1200px (1170)
.col-lg-""
中等尺寸 >=992px (970)
.col-md-""
小尺寸 >=768px (750)
.col-md-""
极小尺寸 <768px
.col-xs-""
布局容器
<div class="container"></div>
<div class="row"></div>
<div class="col-md-x"></div>
偏移
<div class="col-md-x col-md-offset-x"></div>
自适应工具
hidden-xs/sm/md/lg
.visible-md-lg
布局
固定布局 container
流式布局 container-fluid
文字排版
标题
<h1>~<h6>
页面头部
<div class="page-header"></div>
正文
突出显示 <p class="lead">
对齐
text-left
text-center
text-right
text-justify
强调
次要的 class="text-muted"
主要的 class="text-primary"
成功 class="text-success"
信息 class="text-info"
警告 class="text-warning"
危险 class="text-danger"
常用组件
表格
class="table table-striped"
class="table table-bordered"
class="table table-hover"
列表
无样式 list-unstyled
水平 class="list-inline"
列表组合框
.list-group
.list-group-item
.active
.badge 徽章
.list-group-item-heading
.list-group-item-text
图片
圆角 .img-rounded
圆形 .img-circle
缩略图 .img-thumbnail
自适应 .img-responsive
表单
布局
垂直
水平 .form-horizontal
行内 .form-inline
样式
分组 .form-group
label标签 label.control
表单控件 .form-control
input.-lg/md/sm
输入框分组
div.input-group
span.input-group-addon
input.form-control
span.input-group-btn
按钮
btn
主题 btn-xxx
default
primary
success
danger
info
大小
btn-lg/md/sm/xs
块级按钮 btn-block
分组
工具条 div.btn-toolbar
div.btn-group
div.btn-group-vertical
Media Object
div.media
div.media-left
.media-object
div.media-body
.media-heading
图标 FontAwesome
引用样式文件 font-awesome.min.css
应用 <i class="fa fa-xx"></i>
Panel 面板
div.panel panel-default/primary/...
.panel-heading
.panel-body
.panel-footer
导航栏
ul.nav nav-tabs/pills/stacked
li.active
导航条
div.navbar-header
.navbar-brand
汉堡菜单
button
.navbar-toggle
data-target="#id"
data-toggle="collapse"
span .sr-only
横线 span.icon-bar * 3
菜单 .collapse navbar-collapse
ul .nav navbar-nav
li 菜单项
排列
.navbar-left/right
子主题
面包屑导航
ul.breadcrumb
li*3
li.active
分页导航
ul.pagination
li.active
li.disabled
标签&徽章
标签
span.label label-warning
徽章
span.badge
进度条
div.progress progress-striped
div.progress-bar progress-bar-info/danger
助手类
上下文背景
.bg-primary/info
插入特殊图标
span.caret
内容块居中
.center-block
快速浮动
.pull-left
.pull-right
显示/隐藏
.show
.hidden
.invisible(隐藏但占位)
.sr-only(阅读时有效)
.text-hide
高级组件
提示框
div.alert alert-danger/info
<a href="#" class="close" data-dismiss="alert">×</a>
文字
模态窗口
div .modal fade
div .modal-dialog
div .modal-content
div .modal-header
<h4 class="modal-title">确认</h4>
<a href="#" class="close" data-dismiss="modal">×</a>
div .modal-body
<p class="text=warning">确认删除当前产品吗？</p>
div .modal-footer
确认/关闭 Button
0 条评论
下一页
