首页 > 网页设计

Bootstrap 学习(1)

2015-10-22 22:00:20

简介

  Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

Bootstrap 包的内容

下载 Bootstrap

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时,您将看到如下所示的网页:

您会看到两个按钮:

 

引入所需的js和css文件

<!-- 新 Bootstrap 核心 CSS 文件 --><link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"><!-- 可选的Bootstrap主题文件(一般不使用) --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

  注意:Jquey的文件必须在bootstrap.min.js之前引入、

 

第一个例子,Hello World

<!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>   <h1>Hello, world!</h1></body></html>      

 

Bootstrap 浏览器/设备支持

  Bootstrap 可以在最新的桌面系统和移动端浏览器中很好的工作。

  旧的浏览器可能无法很好的支持。

  下表为 Bootstrap 支持最新版本的浏览器和平台:

 ChromeChromeFirefoxFirefoxIEIEOperaOperaSafariSafari
AndroidYESYES不适用NO不适用
iOSYES不适用不适用NOYES
Mac OS XYESYES不适用YESYES
WindowsYESYESYES*YESNO

* Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器。

 

Bootstrap 表格

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

标签描述
<table>为表格添加基础样式。
<thead>表格标题行的容器元素(<tr>),用来标识表格列。
<tbody>表格主体中的表格行的容器元素(<tr>)。
<tr>一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td>默认的表格单元格。
<th>特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<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,如下面实例所示:

<!DOCTYPE html><html><head>  <title>Bootstrap 实例 - 基本的表格</title>  <link href="http://www.cnblogs.com//bootstrap/css/bootstrap.min.css" rel="stylesheet">  <script src="http://www.cnblogs.com//scripts/jquery.min.js"></script>  <script src="http://www.cnblogs.com//bootstrap/js/bootstrap.min.js"></script></head><body><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></body></html>

结果如下

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

类类描述描述描述
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作

这些类可被应用到 <tr>、<td> 或 <th>。

<!DOCTYPE html><html><head>  <title>Bootstrap 实例 - 上下文类</title>  <link href="http://www.cnblogs.com//bootstrap/css/bootstrap.min.css" rel="stylesheet">  <script src="http://www.cnblogs.com//scripts/jquery.min.js"></script>  <script src="http://www.cnblogs.com//bootstrap/js/bootstrap.min.js"></script></head><body><table class="table">  <caption>上下文表格布局</caption>  <thead>   <tr>     <th>产品</th>     <th>付款日期</th>     <th>状态</th>   </tr>  </thead>  <tbody>   <tr class="active">     <td>产品1</td>     <td>23/11/2013</td>     <td>待发货</td>   </tr>   <tr class="success">     <td>产品2</td>     <td>10/11/2013</td>     <td>发货中</td>   </tr>   <tr class="warning">     <td>产品3</td>     <td>20/10/2013</td>     <td>待确认</td>   </tr>   <tr class="danger">     <td>产品4</td>     <td>20/10/2013</td>     <td>已退货</td>   </tr>  </tbody></table></body></html>

结果如下图所示:

响应式表格

通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

<!DOCTYPE html><html><head>  <title>Bootstrap 实例 - 响应式表格</title>  <link href="http://www.cnblogs.com//bootstrap/css/bootstrap.min.css" rel="stylesheet">  <script src="http://www.cnblogs.com//scripts/jquery.min.js"></script>  <script src="http://www.cnblogs.com//bootstrap/js/bootstrap.min.js"></script></head><body><div class="table-responsive">  <table class="table">   <caption>响应式表格布局</caption>   <thead>     <tr>      <th>产品</th>      <th>付款日期</th>      <th>状态</th>     </tr>   </thead>   <tbody>     <tr>      <td>产品1</td>      <td>23/11/2013</td>      <td>待发货</td>     </tr>     <tr>      <td>产品2</td>      <td>10/11/2013</td>      <td>发货中</td>     </tr>     <tr>      <td>产品3</td>      <td>20/10/2013</td>      <td>待确认</td>     </tr>     <tr>      <td>产品4</td>      <td>20/10/2013</td>      <td>已退货</td>     </tr>   </tbody>  </table></div>   </body></html>

结果如下:

 

按钮、在页面插入代码可看:http://www.cnblogs.com/0201zcr/p/4902930.html

  致谢:感谢您的阅读!