首页 > 代码库 > bootstrap 快速入门
bootstrap 快速入门
bootstrap 快速入门
简介
是一个的 HTML、CSS 和 JS 框架
配置页面
远程访问
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
本地访问
<link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.min.css">
<link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/js/bootstrap.min.js"></script>
代码容器
.container
.container-fluid
栅格系统
将一行分割成12列, 可以使用col-md-*的方式了来声明需要占用的宽度
根据屏幕的尺寸分成了四种情况 col-lg-* col-md-* col-sm-* col-xs-*
列的偏移
.col-md-offset-*
列的嵌套
段落
p标签
颜色设置
背景色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
前景色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
内联文本样式
mark标签------加亮文本
s标签 ----- 删除文本
u标签 ----- 下划线文本
b标签 -----加重文本
i标签 ----- 斜体文本
code标签 ---- 代码文本
kbd标签 ---- 键盘按键标识
pre标签 ---- 原样输出(输出代码事例)
对齐方式
text-left
text-center
text-right
字符串大小写
text-lowercase
text-uppercase
text-capitalize
引用
blockquote & footer
blockquote-reverse & footer
列表
无序列表
ul li
有序列表
ol li
无样式列表
list-unstyled
行内列表
list-inline
描述
dl dt dd
浮动
快速浮动
pull-left
pull-right
center-block
清除浮动
clearfix
快速显示和隐藏
show
hide
表格
基本结构
<table class="table">
<thead>
<tr><td>#</td><td>number</td></tr>
</thead>
<tbody>
<tr><td>1111</td><td>2222</td></tr>
</tbody>
</table>
斑马纹理
table-striped
边框
table-bordered
悬浮变色
table-hover
情景颜色
active
success
info
warning
danger
表单
默认
行内
水平排版
校验元素
has-warning
has-error
has-success
元素大小
高度
input-lg
input-sm
input-md
宽度
col-md-*
按钮
类名
btn
样式
btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
尺寸
btn-lg
btn-md
btn-sm
btn-xs
图片
响应式
img-responsive
图片形状
img-rounded
img-circle
img-thumbnail
响应式类
visible-lg visible-md visible-sm visible-xs
hidden-lg hidden-md hidden-sm hidden-xs
组件
图标
按钮组
不带下拉框
带下拉框
尺寸
btn-lg
btn-md
btn-sm
btn-xs
导航
导航条
路径导航
分页
标签
徽章
巨幕
警告框
进度条
媒体对象
列表组
面板
本文出自 “苦逼php” 博客，请务必保留此出处http://haibobo.blog.51cto.com/4799843/1943575
bootstrap 快速入门