前端學習之 Bootstrap （一）

時間 2019-11-19

標籤前端學習 bootstrap 欄目 Bootstarp 简体版

原文原文鏈接

中文文檔css

1、前言

一、簡介

Bootsrtap做爲一個前端框架，開箱即用，封裝了前段開發的大量底層細節，開放靈活，對響應式設計網頁很好支持，組件豐富，社區活躍。
特色：html

可重用性
一致性
靈活的柵欄佈局
定製化
社區活躍
面向將來和開放式開發

二、下載

官網地址前端

2、預覽

一、使用

直接引入
能夠直接在HTML文件中引入Bootsrtapweb

<link href="css/bootsrtap.min.css" rel="styleesheet" media="screen">

Bootstrap CDN：
所謂CDN就是經過一個互聯網部署在多個數據中心的大型分佈式服務器系統。瀏覽器能夠並行的從CDN下載文件，不須要從本身的服務器下載文件。這些文件不在同一個域中，不會受瀏覽器的限制（同時只能在一個域下載幾個文件）。所以下載時不會一個一個排隊。另外CDN會根據用戶的位置和更快的路由速度來選擇服務器下載文件。
優勢：節省帶寬，提升網站性能。bootstrap

<link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/版本號/css/bootstrap.min.css">

這也是web性能優化(頁面訪問)的一個方案api

二、移動設備優先

在 Bootstrap 3 中，對移動設備友好的。爲了確保適當的繪製和觸屏縮放，須要在之中添加 viewport 元數據標籤。瀏覽器

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

在移動設備瀏覽器上，經過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 能夠禁用其縮放（zooming）功能。性能優化

<head>
    <meta name="viewport"  content="width=device-width, initial-scale=1, max-minum-scale=1, use-scalable=no">
</head>

三、佈局容器

Bootstrap 須要爲頁面內容和柵格系統包裹一個 .container 容器。咱們提供了兩個做此用處的類container與container-fluid。但這兩種容器類不能互相嵌套
用於固定寬度並支持響應式佈局的容器前端框架

<div class="container">
  ...
</div>

container會使頁面給人居中的感受服務器

.container-fluid類用於 100% 寬度，佔據所有視口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

.container-fluid給人感受平鋪整個頁面的流式佈局容器

3、柵格系統

一、簡介

柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，內容就能夠放入這些建立好的佈局中，更好的實現設計的一致性。
在大屏幕中，柵格最多能夠擴大到12列。小屏幕中全部的列都會堆疊起來。因爲Bootstrap是移動優先，因此柵格實際上是在小屏設備中定義了尺寸，而之一中定義的柵格尺寸也是和中屏設備和大屏設備。
類前綴名：

小尺寸手機屏幕：.col-xs- （分辨率<768px）
平板屏幕：- col-sm- （分辨率(≥768px)）
小尺寸桌面屏幕：-col-md- （分辨率(≥992px)x）
大尺寸屏幕：.col-lg- （分辨率(≥1200px)）
注：爲了讓網站頁面有更好的而可讀性，對列間距的寬度爲默認30px。即列與列之間的空白區域。

二、不一樣設備的頁面

移動設備和桌面屏幕：使用.col-xs-* 和 .col-md-*

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

手機、平板、桌面：使用.col-xs-* 和 .col-md-，.col-sm-

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

柵欄系統中一行中有十二列，而多出12列，最後一個元素就會換行從新排列。

三、偏移與排列

偏移：在一行中，兩個元素佔據不一樣的列數，不一樣的元素也能夠以間距隔開，列向右側偏移。
列偏移： .col-md-offset-
這些類實際是經過使用 選擇器爲當前元素增長了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

列排列： .col-md-push-* 和 .col-md-pull-* 類能夠改變列（column）的順序。
兩個元素在一行中先後排列，佔據不一樣的列數，使用列排列類就能夠顛倒元素在頁面中排列順序。

3、排版

標題：HTML 中的全部標題標籤都可使用。另外，還提供了 .h1 到 .h6 類，爲的是給內聯（inline）屬性的文本賦予標題的樣式
頁面主題：全局 font-size 設置爲 14px，line-height 設置爲 1.428。
中心內容：經過添加 .lead 類可讓段落突出顯示
內聯：mark
刪除： del
無用文本：s
插入文本：ins
下劃線： u
小號文本：small 默認爲標準字體的百分之85
強調文本：strong
斜體：em
高亮：
- b用於高亮單詞或短語，不帶有任何着重的意味；
- i 標籤主要用於發言、技術詞彙等
對齊類：
- .text-center 居中
- .text-right 靠右
- .text-left 靠左
字母大小寫：
- .text-lowercase
- .text-uppercase
- .text-capitalize

縮略語：當鼠標懸停在縮寫和縮寫詞上時就會顯示完整內容，Bootstrap 實現了對 HTML 的元素的加強樣式。縮略語元素帶有 title 屬性，外觀表現爲帶有較淺的虛線框，鼠標移至上面時會變成帶有「問號」的指針。如想看完整的內容可把鼠標懸停在縮略語上（對使用輔助技術的用戶也可見）, 但須要包含 title 屬性。爲縮略語添加 .initialism 類，可讓 font-size 變得稍微小些。

4、練習

簡單博客格式

一、源碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <header class="row">
        <p class="col-md-2 col-md-offset-2"><strong>My Blog</strong></p>
        <p class="col-md-1 col-md-offset-5"><a href="#">登錄</a></p>
        <p class="col-md-1"><a href="#">註冊</a></p>
        <p class="col-md-1"><a href="#">退出</a></p>
    </header>
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            <div class="text-center">
                <h2 class="text-capitalize">simple blog form</h2>
            </div>
            <div>
                <div class="col-md-4 col-sm-6 text-lowercase">
                    <p>
                        Maybe I'm foolish maybe I'm blind<br>
                        也許是我太傻，也許是我眼瞎<br>
                        Thinking I can see through this and see what's behind<br>
                        覺得我能看穿一切以及背後的真相<br>
                        Got no way to prove it so maybe I'm blind<br>
                        沒法證實什麼，也許是我被矇蔽<br>
                        But I'm only human after all I'm only human after all<br>
                        但畢竟我是個凡人，我只是個凡人<br>
                        Don't put your blame on me<br>
                        請別把你的火撒在我身上<br>
                        Don't put your blame on me<br>
                        別把你的火撒在我身上<br>
                        Take a look in the mirror and what do you see<br>
                        看一眼鏡中世界，你看到了什麼<br>
                        Do you see it clearer or are you deceived in what you believe<br>
                        你洞穿了一切仍是被信仰所欺騙？<br>
                        Cos I'm only human after all you're only human after all<br>
                        由於我只是個凡人，你只是個凡人<br>
                    </p>
                </div>
                <div class="col-md-4 col-sm-6 text-uppercase">
                    <p>
                        Maybe I'm foolish maybe I'm blind<br>
                        也許是我太傻，也許是我眼瞎<br>
                        Thinking I can see through this and see what's behind<br>
                        覺得我能看穿一切以及背後的真相<br>
                        Got no way to prove it so maybe I'm blind<br>
                        沒法證實什麼，也許是我被矇蔽<br>
                        But I'm only human after all I'm only human after all<br>
                        但畢竟我是個凡人，我只是個凡人<br>
                        Don't put your blame on me<br>
                        請別把你的火撒在我身上<br>
                        Don't put your blame on me<br>
                        別把你的火撒在我身上<br>
                        Take a look in the mirror and what do you see<br>
                        看一眼鏡中世界，你看到了什麼<br>
                        Do you see it clearer or are you deceived in what you believe<br>
                        你洞穿了一切仍是被信仰所欺騙？<br>
                        Cos I'm only human after all you're only human after all<br>
                        由於我只是個凡人，你只是個凡人<br>
                    </p>
                    <blockquote class="blockquote-reverse">famous song <cite title="Source Title">Source Title</cite></blockquote>
                </div>
                <div class="col-md-4 col-sm-12">
                    <blockquote title="stay hungry stay foolish">
                        <p>
                            Maybe I'm foolish maybe I'm blind<br>
                            也許是我太傻，也許是我眼瞎<br>
                            Thinking I can see through this and see what's behind<br>
                            覺得我能看穿一切以及背後的真相<br>
                            Got no way to prove it so maybe I'm blind<br>
                            沒法證實什麼，也許是我被矇蔽<br>
                            But I'm only human after all I'm only human after all<br>
                            但畢竟我是個凡人，我只是個凡人<br>
                            Don't put your blame on me<br>
                            請別把你的火撒在我身上<br>
                            Don't put your blame on me<br>
                            別把你的火撒在我身上<br>
                            Take a look in the mirror and what do you see<br>
                            看一眼鏡中世界，你看到了什麼<br>
                            Do you see it clearer or are you deceived in what you believe<br>
                            你洞穿了一切仍是被信仰所欺騙？<br>
                            Cos I'm only human after all you're only human after all<br>
                            由於我只是個凡人，你只是個凡人<br>

                        </p>
                    </blockquote>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-md-pull-9">
            <ul>
                <li>day1</li>
                <ul>
                    <li>筆記一</li>
                    <li>筆記一</li>
                    <li>筆記一</li>
                </ul>
                <li>day2</li>
                <li>day3</li>
            </ul>
        </div>
    </div>
    <footer>
        <div class="text-center">
            <address>
                <strong> Twitter, Inc.</strong><br>
                <abbr title="Phone">Phone:</abbr>0000000
            </address>
        </div>
    </footer>
</div>
</body>
</html>