CSS 框架之 Bootstrap 的下載和安裝

時間 2019-12-13

標籤 css 框架 bootstrap 下載安裝欄目 CSS 简体版

原文原文鏈接

BootStrap 簡介：

Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的。
    響應式設計：Bootstrap 的響應式 CSS 可以自適應於臺式機、平板電腦和手機。
    它爲開發人員建立接口提供了一個簡潔統一的解決方案。
    它包含了功能強大的內置組件，易於定製。

下載：

// Bootstrap 官網
    http://getbootstrap.com/
    // Bootstrap 下載
    http://getbootstrap.com/getting-started/#download

![](http://images2015.cnblogs.com/blog/991711/201705/991711-20170512162356691-923902216.png)
直接下載源碼

安裝

// 解壓 bootstrap-3.3.7.zip
    unzip  bootstrap-3.3.7.zip
    // 找到預編譯好的庫
    ls  bootstrap-3.3.7/dist/
    css  fonts  js
    //  這裏就是你要的庫

使用

// 假設你將這三個文件夾都複製到你的網站服務器的家目錄，將jQuery 也複製到js 目錄裏面
    // 那麼可使用以下代碼使用
      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4   <title>aplex Bootstrap</title>
      5   <meta charset="utf-8">
      6   <meta name="viewport" content="width=device-width, initial-scale=1">
      7   <link rel="stylesheet" href="/css/bootstrap.min.css">
      8   <script src="/js/jquery.js"></script>
      9   <script src="/js/bootstrap.min.js"></script>
     10 </head>
     11 
     12 <body>
     13 <small>本行內容是在標籤內</small><br>
     14 <strong>本行內容是在標籤內</strong><br>
     15 <em>本行內容是在標籤內，並呈現爲斜體</em><br>
     16 <p class="text-left">向左對齊文本</p>
     17 <p class="text-center">居中對齊文本</p>
     18 <p class="text-right">向右對齊文本</p>
     19 <p class="text-muted">本行內容是減弱的</p>
     20 <p class="text-primary">本行內容帶有一個 primary class</p>
     21 <p class="text-success">本行內容帶有一個 success class</p>
     22 <p class="text-info">本行內容帶有一個 info class</p>
     23 <p class="text-warning">本行內容帶有一個 warning class</p>
     24 <p class="text-danger">本行內容帶有一個 danger class</p>
     25 </body>
     26 
     27 </html>