Day52 前端基礎--Bootstrap框架

時間 2019-11-24

標籤 day52 day 前端基礎 bootstrap 框架欄目 Bootstarp 简体版

原文原文鏈接

一，Bootstrap框架初識css

　　https://v3.bootcss.com/css/html

　　1.Bootstrap是什麼？前端

　　　　1.就是一些HTML代碼和css代碼的組合html5

　　　　2.Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架，它是爲實現快速開發web應用程序而設計的一套前端工具包。它支持響應式不佈局，而且在V3版本以後堅持移動設備優先。jquery

　　2.如何使用？web

　　　　賦值粘貼一把梭npm

二，Bootstrap框架使用bootstrap

　　1.基本模板：api

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--IE瀏覽器高速渲染模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--移動端適配配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3個meta標籤*必須*放在最前面，任何其餘內容都*必須*跟隨其後！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!--導入框架-->
    <link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是爲了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
    <!-- 警告：經過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起做用 -->
    <!--[if lt IE 9]如要兼容ie9則須要額外添加下面兩行>
      <!--<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>-->
      <!--<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>-->
    <![endif]-->
  </head>
  <body>
　  <!--頁面容器.container/.container-fluid-->
　　<div class="container" style="height:1000px;background-color:red">     
    <h1>你好，世界！</h1>
   </div>
    <!-- jQuery (Bootstrap 的全部 JavaScript 插件都依賴 jQuery，因此必須放在前邊) -->
    <script src="jquery.js"></script>
    <!-- 加載 Bootstrap 的全部 JavaScript 插件。你也能夠根據須要只加載單個插件。 -->
    <script src="bootstrap-3.3.7/js/bootstrap.js"></script>
  </body>
</html>

　　2.柵格系統瀏覽器

簡介：
柵格系統用於經過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就能夠放入這些建立好的佈局中。下面就介紹一下 Bootstrap 柵格系統的工做原理：

「行（row）」必須包含在 .container （固定寬度）或 .container-fluid （100% 寬度）中，以便爲其賦予合適的排列（aligment）和內補（padding）。

經過「行（row）」在水平方向建立一組「列（column）」。

你的內容應當放置於「列（column）」內，而且，只有「列（column）」能夠做爲行（row）」的直接子元素。

相似 .row 和 .col-xs-4 這種預約義的類，能夠用來快速建立柵格佈局。Bootstrap 源碼中定義的 mixin 也能夠用來建立語義化的佈局。

經過爲「列（column）」設置 padding 屬性，從而建立列與列之間的間隔（gutter）。經過爲 .row 元素設置負值 margin 從而抵消掉爲 .container 元素設置的 padding，也就間接爲「行（row）」所包含的「列（column）」抵消掉了padding。

負值的 margin就是下面的示例爲何是向外突出的緣由。在柵格列中的內容排成一行。

柵格系統中的列是經過指定1到12的值來表示其跨越的範圍。例如，三個等寬的列能夠使用三個 .col-xs-4 來建立。

若是一「行（row）」中包含了的「列（column）」大於 12，多餘的「列（column）」所在的元素將被做爲一個總體另起一行排列。

柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-md-* 柵格類適用於與屏幕寬度大於或等於分界點大小的設備 ， 而且針對小屏幕設備覆蓋柵格類。 所以，在元素上應用任何 .col-lg-* 不存在， 也影響大屏幕設備。

<!--媒體查詢-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
        }
        .c1 {
            background-color: red;
            height: 200px;
        }
        /*媒體查詢*/
        @media screen and (max-width: 700px) {
            .c1 {
                background-color: green;
            }
        }
    </style>
</head>
<body>

<div class="c1">

</div>
</body>
</html>

　　　　1.row表示行，必放在container或container-fluid中

　　　　2.row被均分爲12列，列的語法：col-xx-**

　　　　　　xx的取值範圍：xs -> sm -> md -> lg

　　　　　　　　xs：超小屏幕(手機)

　　　　　　　　sm：小屏幕(平板)

　　　　　　　　md：中等屏幕(桌面顯示器)

　　　　　　　　lg：大屏幕(大桌面顯示器)

<!--實例：手機、平板、桌面-->

<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>

　　　　　　**的取值範圍：1-12

　　　　3.只有列能做爲行的子元素

　　　　4.列偏移

　　　　　　主要做用：使對應的列居中

　　　　　　col-xx-offset-**

<div class="row">
    <div class="col-md-4 col-md-offset-4" style="background-color:deepplink;height:100px"></div>
</div>

　　　　5.列嵌套

　　　　　　爲了使用內置的柵格系統將內容再次嵌套，能夠經過添加一個新的.row元素和一系列.col-sm-*元素到已經存在.col-sm-*元素內。被嵌套的行(row)所包含的列(column)的個數不能超過12(其實，沒有要求必須佔滿12列)，即：任意一列，均可以在內容再定義row，均分12份。

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

　　　　6.列排序

　　　　　　經過使用.col-md-push-*和.col-md-pull-*類就能夠很容易的改變列(column的順序)。

　　　　　　　推：col-xx-push-**

　　　　　　　拉：col-xx-pull-**

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

三，經常使用樣式

1.標題（小標題）:附加小標題

<h2>標題
    <small>小標題</small>
</h2>

　　2.中心內容：突出中心內容，字體變大，.lead

<p class="lead">被突出的內容</p>

3.高亮文本元素：..

<p>在蒼茫的大海上，狂風捲積着烏雲。在烏雲和大海之間，海燕像黑色的閃電，在高傲地<mark>飛翔</mark>。</p>

　　4.被刪除的文本：主要對於爬蟲機器人來講意義不同

<del>被刪除的文本</del>

　　5.無用的文本：主要對於爬蟲機器人來講意義不同

<s>無用的文本</s>

　　6.插入文本

<ins>被插入的問題</ins>

　　7.文本強調：加粗

<p>在蒼茫的大海上，狂風捲積着烏雲。在烏雲和大海之間，海燕像黑色的閃電，在高傲地<strong>飛翔</strong>。</p>

區別：在html5中，用於高亮單詞或短語，不帶有任何着重的意味。

　　8.文本強調：斜體

<em>在蒼茫的大海上，狂風捲積着烏雲。在烏雲和大海之間，海燕像黑色的閃電，在高傲地飛翔。</em>

區別：在html5中，主要用於發言、技術詞彙等，不帶有任何強調的意味。

　　9.對齊：經過文本對齊類，能夠簡單方便的將文字從新對齊

<p class="text-left">Left aligned text.</p>   <!--左端對齊-->
<p class="text-center">Center aligned text.</p>    <!--中間對齊-->
<p class="text-right">Right aligned text.</p>   <!--右端對齊-->
<p class="text-justify">Justified text.</p>    <!--兩端對齊-->
<p class="text-nowrap">No wrap text.</p>   <!--去掉空格-->

　　10.改變大小寫

<p class="text-lowercase">Lowercased text.</p>  <!--統一轉換爲小寫-->
<p class="text-uppercase">Uppercased text.</p>  <!--統一轉換爲大寫-->
<p class="text-capitalize">Capitalized text.</p>  <!--單詞首字母大寫-->

　　11.縮略語：縮略語帶有title屬性，外觀表現爲帶有較淺的虛線框，鼠標移至上面時會變成帶有「問號」的指針。若是想看完整的內容，可把鼠標懸停在縮略語上(對使用輔助技術的用戶也可見)，但須要保護title屬性。

<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

　　12.首字母縮略語：爲縮略語添加.initialism類，可讓font-size變得稍微小些。

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

13.地址：讓聯繫信息以最接近平常使用的格式呈現。在每行結尾添加 能夠保留須要的樣式

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>

　　14.引用

默認樣式的引用：將任何HTML元素包裹在<blockquote>中便可表現爲引用樣式。對於直接引用，咱們建議用標籤。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多種引用樣式：對於標準樣式的<blockquote>，能夠經過幾個簡單的變體技能改變風格和內容。

命名來源：添加<footer>用於標明引用來源。來源的名稱能夠包裹進<cite>標籤中。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

<!--經過賦予 .blockquote-reverse 類可讓引用呈現內容右對齊的效果-->
<blockquote class="blockquote-reverse">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

　　15.列表：

　　　　1.無樣式列表：移除了默認的list-style樣式和左側邊距的一組元素(只針對直接子元素)，這是針對直接子元素的，也就是說，你須要對全部嵌套的列表都添加這個類才能具備一樣的樣式。

<ul class="list-unstyled">
  <li>...</li>
</ul>

　　　　2.內聯列表：經過設置display：inline-block;並添加小量的內填充，將全部元素放置與同一行。

<ul class="list-inline">
  <li>...</li>
</ul>

　　16.描述

　　　　默認描述：帶有描述的短語列表

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

水平排列的描述：.dl-horizontal可讓<dl>內的短語及其描述排在一行。開始是像<dl>的默認樣式堆疊在一塊兒，隨着導航條逐漸展開而排列在一行

補充：

　　自動截斷：經過text-overflow屬性，水平排列的描述列表將會截斷左側太長的短語。在較窄的視口(viewport)內，列表將變爲默認堆疊排列的佈局方式。

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

17.內聯代碼：經過<code>標籤包裹內聯樣式的代碼片斷。

<code>&lt;div&gt;</code>

18.用戶輸入：經過<kbd>標籤標記用戶經過鍵盤輸入的內容。

<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

19.代碼塊：多行代碼能夠使用<pre>標籤。爲了正確的展現代碼，注意將尖括號作轉義處理

補充：還能夠使用.pre-scrollable類，其做用是設置max-height爲350px，並在垂直方向展現滾動條。

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

20.變量：經過<var>標籤標記變量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

21.程序輸出：經過<samp標籤來標記程序輸出的內容>

<samp>....</samp>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。