Bootstrap
2017-03-07 00:14:14 0 举报AI智能生成
Bootstrap是一个用于开发响应式和移动优先的网页应用的开源前端框架。它由Twitter公司开发并发布，提供了一套丰富的CSS和JavaScript组件，可以帮助开发者快速构建出美观且功能完善的网页界面。Bootstrap基于HTML、CSS和JavaScript，支持多种浏览器，并且兼容各种设备。它的设计理念是“移动设备优先”，因此在小屏幕上也能提供良好的用户体验。同时，Bootstrap也提供了大量预设的样式和布局，使得开发者可以更专注于业务逻辑的开发。此外，Bootstrap还拥有活跃的社区和丰富的插件资源，可以根据项目需求进行定制和扩展。
作者其他创作
大纲/内容
简介
集成HTML,CSS,JS前端框架
优势
省时
响应式布局
浏览器兼容性好
开源免费
应用
布局与排版
网格系统
将窗口划分为12列
设备尺寸
大尺寸>=1200px(1170px
col-lg-**
中尺寸>=992px(970px
col-md-**
小尺寸>=768
col-sm-**
极小尺寸<768
col-xs-**
布局容器
div.container
div.row
col-md-**
偏移
col-md-offset-**
自适应工具类
hidden-** 隐藏
visble-** 显示
布局
固定 cntainer
流体container-fluid（充满）
文字排版
标题
<h1>--<h6>
页面头部
page-header
正文
突出显示lead
对齐
text-left
text-center 居中对齐
text-right
text-justify 两端对齐
强调
次要 text-muted
主要 text-primary
成功 text-success
成功 text-success
提示 text-info (一般）
危险 text-danger
引述 blockquote标签
警告 text-warning
常用组建
表格
table
table-striped 隔行显示
table-bordered 边框显示
table-hover 鼠标经过
active 激活
强调：danger/success/info....
列表
list-unstyled 去除样式
list-inline 变成整行（水平排列
列表组合框
list-group 列表分组
list-group-item
badge 徽章
active 当前激活状态
list-group-item-heading 头部
list-group-item-text 段落
list-group-item-success/info 样式......
图片
圆角 img-rounded
圆形 img-circle
缩略图 img-thumbnail
自适应 img-responsive
表单
布局
垂直
水平
form-horizontal
行内
form-inline
样式
分组 form-group
label.control-lable
表单控件 form-control
input-lg 变大
input-sm 变小
输入框分组
div.input-group
span.input-group-addon
input.form-control
span.input-group-btn
内容 textarea
按钮
btn
主题 btn-xxx
default
primary
......
btn-lg
btn-sm
块级按钮 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
图标
http://fontawesome.io
引用样式文件 font-awesome.min.css
应用 class="fa fa-xx"
Panel 面板
div.panel panel-default
panel-heading
panel-body
panel-footer
导航
标签
ul.nav nav-tabs/pills (水平)
li.active
ul.nav nav-stacked (垂直)
导航条
样式：nav.navbar navbar-default/inverse
div.nav navbar-header
navbar-brand
汉堡菜单
navbar-toggle
横线 span.icon-bar
data-target="#id"
data-toggle="collapse"
div.collapse navbar-collapse
菜单 ul.nav navbar-nav
li 菜单项
排列
navbar-left
navbar-right
固定：navbar-static-top"
面包屑导航
ul.breadcrumb
li.active
分页导航
ul.pagination
li.active
li.disabled
标签&徽章
span.label label-default
span.badge
进度条
div.progress progress-striped
div.progress-bar progress-bar-xxx
助手类
上下文背景
bg-info/...
插入符号图标
span.caret
内容块局中
center-block
快速浮动
pull-left
pull-right
显示&隐藏
show 显示
hidden 隐藏（不占位置
invisible 隐藏（占位置）
sr-only 只在屏幕阅读是有效
隐藏文本
text-hide
高级组件
alert
div.alert alert-info/...
文字
<a class="close" data-dismiss="alert">×</a>
模态窗口（对话框
modal-fade ; modal-dialog
modal-header
modal-body
modal-footer
$("#id-modal").modal();
0 条评论
下一页
