Bootstrap
2016-10-26 10:29:17 0 举报AI智能生成
Bootstrap是一个快速、直观且功能强大的前端开发框架，它基于HTML、CSS和JavaScript构建。由Twitter的开发者创建并开源，旨在帮助开发者更轻松地创建响应式网站和Web应用。Bootstrap提供了丰富的预设样式和组件，如导航栏、按钮、表单、卡片等，大大减少了开发时间和代码量。同时，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
导航条
nav.navbar navbar-default navbar-static-top
div.navbar-header
.navbar-brand
汉堡菜单
button
.navbar-toggle
data-target="#id"
data-toggle="collapse"
横线 span.icon-bar * 3
0 条评论
下一页
