Bootstrap
2016-10-27 23:04:04 0 举报AI智能生成
Bootstrap是一个用于开发响应式和移动优先的网页应用的开源前端框架。它由Twitter公司开发并维护，提供了一套完整的CSS和JavaScript工具，帮助开发者快速构建出美观且功能丰富的网页界面。Bootstrap基于HTML、CSS和JavaScript，支持多种浏览器，包括桌面、平板和手机等设备。它包含了大量预定义的CSS样式和JavaScript组件，如导航栏、按钮、表单、模态框等，可以大大提高开发效率。此外，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 条评论
下一页
