bootstrap 快速入门  

 

简介

是一个的 HTML、CSS 和 JS 框架

配置页面

远程访问




本地访问


代码容器

.container

.container-fluid

栅格系统

将一行分割成12列, 可以使用col-md-*的方式了来声明需要占用的宽度

根据屏幕的尺寸分成了四种情况 col-lg-*  col-md-*  col-sm-*  col-xs-*

列的偏移

.col-md-offset-*

列的嵌套

段落

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

表格

基本结构

#number
11112222

斑马纹理

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

导航

导航条

路径导航

分页

标签

徽章

巨幕

警告框

进度条

媒体对象

列表组

面板