Bootstrap 2.3.2：入門指南

引導程序是 CSS框架 在整個網絡中變得非常流行。 他們的風格 響應 在社交網絡上看到 Tuenti y Twitter。 使用此功能為我們節省了開發Web應用程序的時間，因為它節省了我們創建適用於所有設備的干淨頁面樣式所需的所有工作和精力。 諮詢此框架中使用的樣式，我們將意識到它們是我們熟悉的，因為今天許多網站已經實現了它。

結構

為了通過手機和平板電腦訪問我們的網站，我們將不得不使用Bootstrap為我們提供的流暢結構。 這種結構的使用非常簡單，一切都基於元素 跨度 這對我們有幫助 佈局 我們的網頁設計。 稍後，當我們從 智能手機 o 片劑，這將自動適應所述設備，從而大大提高了導航質量。 我們將使用 跨度 具有在流體結構內的邏輯劃分中的類，即：

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

其中數字2表示跨度的大小。 每行包含足夠的空間來容納大小為12的1個跨度或大小為2的6個跨度。可以隨意分配。 超過一行的空間後，它將自動向下移至下一行，從而允許我們使用 跨度 大小12以創建換行符。 如果我們想跳過一些 跨度 創建一個時，即從4開始 跨度，並應用大小為3的代碼，我們將使用以下代碼：

<div class="span2 offset4">Contenido</div>

這使該部門可以跳四 跨度 在顯示內容之前。 我們可以隨意使用它，而跳過我們想要的代碼。

每個設備的設計不同

為了對每種類型的設備應用不同的設計，我們將使用以下類來告訴每個邏輯分區其面向的設備：

這樣，我們可以為每個具有相同URL的設備展示完全不同的設計。

按鈕

Bootstrap為我們提供了乾淨的彩色按鈕，其使用非常簡單：

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

哪裡 btn btn-success 指的是按鈕的顏色，要進行更改，只需用上圖中顯示的類替換它即可。

安裝引導程序

對於此CSS框架的安裝，我們將從文章結尾處留下的鏈接中下載zip，我們將編寫以下代碼 在我們的HTML文件的開頭.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

一旦確定CSS和JS文件與HTML文件位於同一文件夾中，就可以開始設計響應式網站。

更多信息 - 表格驗證

下載 - 引導程序：CSS框架