Bootstrap 学习（1）_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

Bootstrap 学习（1）_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:34 AM

简介

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

Bootstrap 包的内容

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap 插件 部分详细讲解。

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

下载 Bootstrap

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

您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。

引入所需的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 id="Hello-world">Hello, world!</h1></body></html>

Bootstrap 浏览器/设备支持

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

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

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

ChromeChrome FirefoxFirefox IEIE OperaOpera SafariSafari

Android	YES	YES	不适用	NO	不适用
iOS	YES	不适用	不适用	NO	YES
Mac OS X	YES	YES	不适用	YES	YES
Windows	YES	YES	YES*	YES	NO

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

Bootstrap 表格

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

标签描述

），用来标识表格列。）。内使用。


为表格添加基础样式。

表格标题行的容器元素（

表格主体中的表格行的容器元素（

一组出现在单行上的表格单元格的容器元素（	或	）。
		默认的表格单元格。
		特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在

关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中：

类描述 , 、

.table

为任意添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态

.table-striped	在
.table-bordered	为所有表格的单元格添加边框
.table-hover	在
.table-condensed	让表格更加紧凑
联合使用所有表格类

和

类

下表的类可用于表格的行或者单元格：

类描述

.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：

<!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 基本的表格</title>   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/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	表示一个危险的或潜在的负面动作

这些类可被应用到

或

。

<!DOCTYPE html><html><head>   <title>Bootstrap 实例 - 上下文类</title>   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/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="/bootstrap/css/bootstrap.min.css" rel="stylesheet">   <script src="/scripts/jquery.min.js"></script>   <script src="/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>

结果如下：

按钮、在页面插入代码可看：

　　致谢：感谢您的阅读！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

See all articles