bootstrap使用方法

『壹』 bootstrap圖標 怎麼用

bootstrap引用圖標的方法：

1、下載包並解壓

在『elegant_font』文件夾中會發現「HTMLCSS」子文件夾，把它復制到你的項目中（注意，這里可以重命名哦）

2、將連接添加到『style.css』，html里添加一個圖標，內容如下：

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

<link rel="stylesheet" href="path/to/elegant-font/style.css">

可以在你HTML里添加圖標，並且使用CSS來更改它們的樣式：

<span aria-hidden="true" class="icon_pencil"></span>

以下是導入的矢量圖標：

『貳』 如何來使用bootstrap table

你好，
使用bootstrap table方法：
bootstrap-table是在bootstrap-table的基礎上寫出來的，專門用於顯示數據的表格插件。而bootstrap是來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，具有簡便靈活，快速前端開發的優勢。對與bootstrap在此就不在敘述。本文將著重講解自己在項目中使用到bootstrap-table的一些理解和如何學習它。

首先交代一下，jquery ，bootstrap ，bootstrap-table 三者之間的關系。bootstrap很多部分代碼涉及到了jquery的，也就是說 bootstrap是依賴jquery的，而我們要使用的bootstrap-table則是在bootstrap基礎上創造出來的，所以在使用bootstrap-table之前必須引用 jquery 和bootstrap的相關js，css文件。
接著說，bootstrap-table的特點:與jquery-ui，jqgrid等表格顯示插件而言，bootstrap-table扁平化，輕量級,對於一些輕量級的數據顯示，他是綽綽有餘，而對父子表等的支持也很好，最主要的是可以與bootstrap的其他標簽無縫組合。

『叄』 bootstrap使用方法

面板樣式是在很多種情況下都可能會使用到的樣式之一，例如博客的側邊欄、企業網站的公告欄、欄目列表等。

面板樣式除了內容之外，還有一個面板頭部可以添加標題，讓我們通過這篇文章看看Bootstrap面板樣式的使用方法。

Bootstrap面板基本樣式

直接調用面板樣式也非常容易，只需要通過以下代碼即可實現：

<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
該樣式僅僅包含了面板樣式的內容部分，而沒有加入頭部，適用於不需要頭部的面板內容。

Bootstrap面板帶標題樣式

上面提到的面板樣式是沒有帶標題的，在一些情況下不夠用，所以Bootstrap面板還提供了帶有標題的面板樣式，讓我們看看應該怎麼去使用：

<div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">面板標題</h3> </div> <div class="panel-body"> 面板內容 </div> </div>
上面這一部分代碼是最為標準的帶有標題的面板結構，為了適應閱讀設備以及SEO搜索引擎優化元素，最好將標題放入h1-h5的標簽中。

Bootstrap面板帶注腳樣式

如果一些解釋說明類的文字無法在面板標題很好地表現出來，可以通過注腳的形式來進行說明，Bootstrap面板同樣提供了注腳這個樣式：

<div class="panel panel-default"> <div class="panel-body"> 面板內容 </div> <div class="panel-footer">面板注腳</div> </div>
通過主次關系來進行標題或者是注腳的選擇，是用好面板組件的關鍵。

Bootstrap面板有意義的樣式

和其他Bootstrap組件一樣，Bootstrap面板樣式同樣具有有意義的樣式，通過引用這幾個樣式可以將該面板的作用直觀展現出來，同樣也是那幾種顏色和樣式名稱：

<div class="panel panel-primary">主要面板樣式</div> <div class="panel panel-success">成功面板樣式</div> <div class="panel panel-info">信息面板樣式</div> <div class="panel panel-warning">警告面板樣式</div> <div class="panel panel-danger">危險面板樣式</div>
Bootstrap面板與表格結合

如果你需要在面板中引入表格樣式，那麼也可以很方便地實現：

<div class="panel panel-default"> <div class="panel-heading">面板標題</div> <table class="table"> 表格內容 </table> </div>
Bootstrap面板與列表結合

就像開頭所說的一樣，如果你想要在面板中引入列表，那也真是再合適不過了，通過以下代碼便可輕松實現：

<div class="panel panel-default"> <div class="panel-heading">面板標題</div> <div class="panel-body"> <p>面板內容簡介</p> </div> <ul class="list-group"> <li class="list-group-item">列表項目1</li> <li class="list-group-item">列表項目2</li> <li class="list-group-item">列表項目3</li> <li class="list-group-item">列表項目4</li> <li class="list-group-item">列表項目5</li> </ul> </div>

『肆』 什麼是bootstrap方法

網格系統的實現原理，是通過定義容器大小，平分12份(也有平分成24份或32份，但12份是最常見的)，再調整內外邊距，最後結合媒體查詢，就製作出了強大的響應式網格系統。Bootstrap框架中的網格系統就是將容器平分成12份。

『伍』 如何使用Bootstrap快速開發Web前端

如何使用Bootstrap針對 Bootstrap 的 HTML清單 • 是一個有用的框架 HTML 文件，用於結合使用 Bootstrap 與一個固定布局和響應特性：清單 • 用於 Bootstrap 項目的基本框架 HTML 文件 (listing1.html)

在 Bootstrap 下載中，請注意，每個 CSS 和 JavaScript 文件有兩個版本可用(例如 bootstrap.js 和 bootstrap.min.js)。第一種形式是一個常規文件，第二種形式是壓縮文件或 「縮小文件」。就像在本文中一樣，使用縮小版本即可實現最有效的頁面載入。
listing1.html 的開始之處的 DOCTYPE 聲明將其標記為一個 HTML5 文件。head 元素內的 meta標記控制移動的小屏幕布局。(為方便起見，我將它們稱作 meta/viewport 標記。)默認情況下，大多數移動設備按比例縮小 Web 頁面，使之適應屏幕大小，就像在桌面瀏覽器窗口中一樣。這就是為什麼許多網站上的文本和圖像在手機瀏覽器中看起來很小的原因。meta/viewport 聲明中的 initial-scale=1.0 部分禁用了這一行為，告訴設備要保持頁面的原有尺寸。該聲明表示 Web 設計人員(在本例中為 Bootstrap)已經完成了實現較小屏幕的響應式設計這一任務，所以在默認情況下，沒必要採用蠻力方法。
稍後，清單 1 的 head 標記是 Bootstrap CSS 的鏈接。在文件的末尾，載入 jQuery 和 Bootstrap 實用程序 JavaScript。這些腳本在末尾運行可實現最佳性能。
設置代碼
當使用 Bootstrap(或任何 Web 支持文件集)時，您可以從多種方法中選擇用來設置 HTML 和其他代碼的方法。我建議您創建一個文件夾來存儲自己的項目，然後將 Bootstrap 文件及其完整的文件夾結構復制到項目文件夾中。將您自己的 HTML 文件放在最頂層，並將您自己的 CSS、JavaScript 和圖像文件放在相應的 Bootstrap 子文件夾中(這些文件夾的名稱分別為 css、js 和 img)。然後，整體結構如下所示：

CSS 設備調整
meta/viewport 標記是當前的約定，用於將頁面調整為設備的可視瀏覽器空間。萬維網聯盟 (World Wide Web Consortium, W3C) 正在准備一種替換機制，該機制以一種新的 CSS 規則的形式出現(參見 參考資料)。清單 1 中 meta/viewport 聲明的等效 CSS 是：

目前，您可以將這個代碼包含在您的 CSS 中，並在 HTML 中保留 meta/viewport 標記。當 CSS 形式受到廣泛支持時，您就可以刪除meta/viewport 聲明。