Bootstrap 安裝和入門
簡介
所以你想開始為你的專案使用 bootstrap？大！ 然後讓我們馬上開始吧！
什麼是載入程式？ Bootstrap 是一個開源庫，你可以使用響應式設計和簡單的程式碼來建立令人驚歎的響應式專案。響應式設計是一種設計理念，其中系統設計（表示和佈局）根據裝置的佈局進行響應/調整。保持設計響應的主要原因是使用一系列裝置將應用程式的範圍擴大到更大的使用者群。
安裝
Bootstrap 可以以多種不同的方式安裝，也可以安裝在許多不同型別的專案中。在下面的列表中，我已經放置了一些關於如何安裝 bootstrap 下載連結的下載和教程
連結
- 直接下載 - 下載連結
- CDN - 來到這裡
- 涼亭 -
bower install bootstrap[閱讀] - NPM -
npm install bootstrap[閱讀] - 作曲家 -
composer require twbs/bootstrap[閱讀] - 自定義 - 我有你自己的配置，你可以在這裡自定義。
- Sass - 對於 Sass 相關專案，你可以[這裡] [1]。
基本資訊
所以你現在已經在專案中安裝了 bootstrap。現在是時候開始使用 bootstrap 的巨大優勢了。首先，我將告訴你一些 bootstrap 的基本用法，之後我將展示一些小例子，最後我會給你一個啟動程式碼示例，你可以用它作為起始模板！
網格系統
Bootstrap 使用網格系統。該網格系統通常由 12 列組成。這 12 列中的每一列具有相同的寬度，但可以具有不同的高度。
所以我們有一個由 12 列組成的網格系統。我們可以使用這些列來構建我們的基本網站。讓我們說我們想要實現以下佈局：
選單 - 全寬
側邊欄 - 螢幕的 1/3
主要內容 2/3 螢幕
頁尾 - 全寬
選單
首先我們要看選單。我們知道網格系統可以使用 12 列。由於我們想要全寬度的選單，我們必須將選單放在所有 12 列中。它看起來像下面的例子
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Menu
</div>
通過給選單一個 col-lg-12 類，我們指出以下內容：
col - classname 中的 col 代表列。
lg - classname 中的 lg 代表螢幕的寬度，在這種情況下是大的。
12 - classname 中的 12 代表我們希望選單擁有的列數。因為在這種情況下我們想要一個全寬的選單，我們得到所有 12 列（12/12）
由於我們在選單中使用了 12 列中的 12 列作為選單，因此將在新行上設定。
側邊欄
我們要新增到模板的第二個專案是側邊欄。現在正如我所說，我們希望側邊欄是螢幕的 1/3。所以我們要做的是將 3 列中的 12 列分開。我們現在知道要填充多少列以達到螢幕的 1/3。請遵循以下程式碼。
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
與選單相同，現在我們的選單數量與選單不同。
col - classname 中的 col 代表列。
lg - classname 中的 lg 代表螢幕的寬度，在這種情況下是大的。
4 - classname 中的 12 代表我們希望側邊欄擁有的列數。因為在這種情況下我們希望側邊欄填滿螢幕的 1/3，所以我們只會抓住 12 列中的 4 列（4/12）
內容
現在，在這一行，我們的側邊欄旁邊還有 8 列。所以現在我們將用我們的內容填補這些內容。請參閱下面的示例程式碼
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content
</div>
現在，因為我們已經在這一行中填充了 12 列的剩餘 8 列，所以下一節將再次從具有 12 列的新行開始。
頁尾
頁尾，再次就像選單將成為螢幕上的全寬度塊一樣，所以我們將在該行上抓取所有 12 列為我們的頁尾，請參閱下面的示例程式碼。
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The footer
</div>i are described below.
所以現在我們建立了一個非常小的 html 檔案，我們的第一個 bootstrap 模板。但這是非常基礎的。通常我們會更多地形成這個程式碼，以便為它提供完整的引導體驗。其中一些經驗如下所述。
使用行和容器正如我在上面的簡單示例中所述，bootstrap 使用 12 列的行。當一行填充 12 列時，bootstrap 將在新行上啟動。顯示這些行的最佳方法是使用行類。我們還將使用容器類。這就像一個 body 標籤，在這個容器中我們將放置所有程式碼。你可以選擇容器或容器流體類。唯一的區別是容器流體類使用螢幕的整個寬度而容器類不使用。這些基本功能的一個例子如下。
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The menu consisting of 12 columns
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
The sidebar consisting of 4 columns
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
The main content consisting of 8 columns
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
The footer consisting of 12 columns
</div>
</div>
</div>
所以我們現在用 bootstrap 建立了一個完整的頁面模板。這是一個非常簡單的，但從基礎開始，之後你將能夠使用各種引導類和功能。最後一件事。類中的 lg-md-sm 和 xs 列名對應，就像我告訴頁面的寬度一樣。LarGe，MeDium，SMall 和 XSmall。不要忘記，通過更改列數，你可以使用它來在不同寬度上對列進行不同的樣式設定。記得整行包含 12 列！
有關更多資訊，請訪問： http ： //getbootstrap.com/ <br？有關很好的示例，請訪問： http ： //expo.getbootstrap.com 或 http://bootsnipp.com/