Bootstrap

简介:=>

Bootstrap是Twitter公司开发的一款前台框架,包含HTML,CSS和JS常奏效果;

官网:

http://www.bootcss.com/

下载:

https://v3.bootcss.com/getting-started/#download

目录结构:

css:bootstrap.css 和 bootstrap.min.css

fonts:字体文件(glyphicon)

js:bootstrap.js 和 bootstrap.min.js

引入文件:

1.引入jquery.js

2.引入Bootstrap->Bootstrap.css和Bootstrap.js

组件:

按钮:

btn:定义按钮的公共样式

btn-default:默认样式

btn-danger:危险样式

btn-warning:警告样式

btn-success:成功样式

btn-info:提醒按钮

btn-primary:基础按钮

btn-lg:大按钮(lg=large)

btn-sm:小按钮(sm=small)

btn-ss:超小按钮(xs=eXtra Small)

btn-block:块级按钮(默认拉伸到父级元素100%的宽度)

代码演示:=>

---------------------------

图片:

img-round:圆角效果(border-radius:6px;)

img-circle:圆形效果(border-radius:50%;)

img-thumbnail:缩略图

img-responsive:响应式(width:100% height:auto)

代码演示:=>

--------------------------------

文本:

字体颜色:

text-danger:文本危险色

text-success:文本成功色

text-warning:文本警告色

text-info:文本提醒色

text-primary:文本基础色

文本背景色:

bg-danger:文本危险色

bg-success:文本成功色

bg-warning:文本警告色

bg-info:文本提醒色

bg-primary:文本基础色

文本对其方式:

text-left:左对齐

text-right:右对齐

text-center:居中对其

text-justify:两端对其

文本转换:

text-uppercase:字母大写

text-lowercase:字母小写

text-capitalize:首字母大写

代码演示:=>

----------------------------

格栅系统:

col-md-数字:数字范围1-12,md-中等屏幕

屏幕尺寸:

col-xs(xs/sm/md/lg)超小屏幕 手机(<768px);

col-sm(sm/md/lg)小屏幕 pad(>=768px);

col-md(md/lg)中等屏幕 电脑(>=992px)

col-lg大屏幕 大的桌面系统显示器

偏移量:

col-[尺寸]-offset-[数字]

代码演示:=>

--------------------------------

面板(panel):

panel:公共样式

panel-[default|success|info|warning|danger|primary]六种样式;

组成部分:panel-heading panel-title:面板头部

panel-body:面板主体

panel-footer:面板尾部

代码演示:=>