BootStrap简单组件使用

本文主要是介绍BootStrap简单组件使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

新项目改框架，前台要用BootStrap响应式布局，如此一来，又把BootStrap学习了一遍。BootStrap响应式布局做的不错，组件的使用也是跟以前有了很大的不同，下面就简单介绍一下BootStrap简单组件的使用。

使用BootStrap

使用BootStrap前，需要先引入BootStrap的css、js和Jquery。

面板

通常做系统时，我们经常会把页面分为几部分。一般情况下我们会将页面分为几个div，然后设置div的样式，有了BootStrap，就可以直接用面板来控制，而且它还可以根据浏览器窗口的大小来自适应自己的大小，这也是响应式布局的一个特点。

<!DOCTYPE html>
<html>
<head><title>Bootstrap 实例 - 带表格的面板</title><link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body><div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">面板标题</h3></div><div class="panel-body">这是一个基本的面板</div><table class="table"><th>产品</th><th>价格 </th><tr><td>产品 A</td><td>200</td></tr><tr><td>产品 B</td><td>400</td></tr></table>
</div>
<div class="panel panel-default"><div class="panel-heading">面板标题</div><table class="table"><th>产品</th><th>价格 </th><tr><td>产品 A</td><td>200</td></tr><tr><td>产品 B</td><td>400</td></tr></table>
</div>
</body>
</html>

栅格布局

现在公司做的项目，基本上都是左侧展示功能列表，右侧展示详细的页面内容。自动的将页面分为左右两部分，就是用BootStrap的栅格布局来做的，其实也不止是两部分，多个栅格也是可以的。BootStrap栅格布局会自动把页面分为12列，只要分别设置左右的列数就可以控制左右两边的宽度。栅格布局是没有高度的，它会根据里面放置内容的高度来自适应，不过也可以重写BootStrap的css，使得栅格在一加载的时候就有自己的高度。

<div class="container"><div class="row clearfix"><div class="col-md-6 column"></div><div class="col-md-6 column"></div></div>
</div>

表格

表格应该算是很常用的了，BootStrap的表格元素没有变，在页面上写一个表格，只不过要修改表格的class，这样就能添加BootStrap的样式。

表格元素：

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption><