bootstrap总结

bootstrap

一、简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端响应式框架。

特点：

跨设备、跨浏览器；响应式布局；提供全面的组件；内置Jquery插件；定制

包含内容：

1、基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

2、CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

3、组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

4、JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。

5、定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

 

二、基本内容

1、页面主题

bootstrap将全局font-size设置为14px，line-height设置为1.428（即20px）；颜色设置为#333.

 

2、文本

(a)p、h1...h6、

内联元素使用标题字体class=“h1....h6”：span、small

设置文本对齐：class=“text-left text-center text-right text-nowrap（文本不换行）”

设置英文文本大小写：class=“text-lowercase text-uppercase text-capitalize(首字母大写)”

 

3、图片

图片形状：

class=“img-rounded（获得图片圆角） img-circle（整个图片变成圆形）img-thumbnail（缩略图，添加一些内边距和一个灰色的边框） img-responsive(响应式图片,设置 max-width: 100%; 和 height: auto; )”

 

4、表格

table：class=“table（表格基本样式，加大间距、横线） table-striped（让tbody中的一行隔一行加单色背景 table-bordered（表格加边框） table-hover（鼠标悬停） ）”

tr：class=“success info warning danger active（每一行的背景样式）sr