bootstrap 快速入门

bootstrap 快速入门  

 

简介

是一个的 HTML、CSS 和 JS 框架

配置页面

远程访问

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

 

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

 

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

 

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

本地访问

<link rel="stylesheet" href="./css/bootstrap.min.css">

<link rel="stylesheet" href="./css/bootstrap-theme.min.css">

<script type="text/javascript" src="./js/jquery.js"></script>

<script type="text/javascript" src="./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

导航

导航条

路径导航

分页

标签

徽章

巨幕

警告框

进度条

媒体对象

列表组

面板