Bootstrap的简介
Bootstrap,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。它是一个 CSS/HTML 框架。Bootstrap 提供了优雅的 HTML 和 CSS 规范。Bootstrap 一直是 GitHub 上的热门开源项目。
为什么使用 Bootstrap?移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。浏览器支持:所有的主流浏览器都支持 Bootstrap。容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。它为开发人员创建接口提供了一个简洁统一的解决方案。它包含了功能强大的内置组件,易于定制。它还提供了基于 Web 的定制。它是开源的。
Bootstrap 包的内容基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS:Bootstrap 自带以下特性,全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。
定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:
内使用
标签描述<table>为表格添加基础样式<thead>表格标题行的容器元素(<tr>),用来标识表格列<tbody>表格主体中的表格行的容器元素(<tr>)<tr>一组出现在单行上的表格单元格的容器元素(<td>或<th>)<td>默认的表格单元格<th>特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在<caption>关于表格存储内容的描述或总结表格类
下表样式可用于表格中:
类描述.table为任意<table>添加基本样式 (只有横向分隔线).table-striped在<tbody>内添加斑马线形式的条纹 ( IE8 不支持).table-bordered为所有表格的单元格添加边框.table-hover在<tbody>内的任一行启用鼠标悬停状态.table-condensed让表格更加紧凑<tr>,<th>和<td>类
下表的类可用于表格的行或者单元格:
类描述.active将悬停的颜色应用在行或者单元格上.success表示成功的操作.info表示信息变化的操作.warning表示一个警告的操作.danger表示一个危险的操作基本的表格
如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:
<table class=”table”> <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody></table>