前言
新项目改框架,前台要用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>< |