bootstrap基本整理1

時間 2019-11-22

標籤 bootstrap 基本整理欄目 Bootstarp 简体版

原文原文鏈接

目錄css

bootstrap基本整理<1>

bootstrap基本整理<1>

@[基本實例|基於bootstrap框架]html

bootstrap簡介

Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的前端

boostrap CSS

bootsrap概述

bootstrap設定文檔類型

<!DOCTYPE>
<html>
...
</html>

移動設備優先

爲了更好的適應移動設備，須要添加<viewport meta>標籤bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1.0, user-scalable=no">

width 屬性控制設備的寬度。假設您的網站將被帶有不一樣屏幕分辨率的設備瀏覽，那麼將它設置爲 device-width 能夠確保它能正確呈如今不一樣設備上。
initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。
在移動設備瀏覽器上，經過爲 viewport meta 標籤添加 user-scalable=no 能夠禁用其縮放（zooming）功能。
一般狀況下，maximum-scale=1.0 與 user-scalable=no 一塊兒使用。這樣禁用縮放功能後，用戶只能滾動屏幕，就能讓您的網站看上去更像原生應用的感受。瀏覽器

bootstrap網格系統

Bootstrap 包含了一個響應式的、移動設備優先的、不固定的網格系統，能夠隨着設備或視口大小的增長而適當地擴展到 12 列。它包含了用於簡單的佈局選項的預約義類，也包含了用於生成更多語義佈局的功能強大的混合類。前端框架

bootstrap網格系統工做原理
- 行必須放置在 .container class 內，以便得到適當的對齊（alignment）和內邊距（padding）。
使用行來建立列的水平組。
內容應該放置在列內，且惟有列能夠是行的直接子元素。
預約義的網格類，好比 .row 和 .col-xs-4，可用於快速建立網格佈局。LESS 混合類可用於更多語義佈局。
列經過內邊距（padding）來建立列內容之間的間隙。該內邊距是經過 .rows 上的外邊距（margin）取負，表示第一列和最後一列的行偏移。
網格系統是經過指定您想要橫跨的十二個可用的列來建立的。例如，要建立三個相等的列，則使用三個 .col-xs-4。

<!--網格系統基本結構-->
<div class="container">
    <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
    </div>
    <div class="row">
        <div class="col-*-*"></div>
        <div class="col-*-*"></div>
    </div>
</div>

列偏移

偏移是一個用於更專業的佈局的有用功能。它們可用來給列騰出更多的空間。例如，.col-xs-* 類不支持偏移，可是它們能夠簡單地經過使用一個空的單元格來實現該效果。
爲了在大屏幕顯示器上使用偏移，請使用 .col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增長 * 列，其中 * 範圍是從 1 到 11。框架

列嵌套

爲了在內容中嵌套默認的網格，請添加一個新的 .row，並在一個已有的 .col-md-* 列內添加一組 .col-md-* 列。被嵌套的行應包含一組列，這組列個數不能超過12（其實，沒有要求你必須佔滿12列）。佈局

bootstrap排版

標題

<h1>我是標題1 h1</h1>
<h2>我是標題2 h2</h2>
<h3>我是標題3 h3</h3>
<h4>我是標題4 h4</h4>
<h5>我是標題5 h5</h5>
<h6>我是標題6 h6</h6>

內聯子標題

<h1>我是標題1 h1. <small>我是副標題1 h1</small></h1>
<h2>我是標題2 h2. <small>我是副標題2 h2</small></h2>
<h3>我是標題3 h3. <small>我是副標題3 h3</small></h3>
<h4>我是標題4 h4. <small>我是副標題4 h4</small></h4>
<h5>我是標題5 h5. <small>我是副標題5 h5</small></h5>
<h6>我是標題6 h6. <small>我是副標題6 h6</small></h6>

爲了給段落添增強調文本，則能夠添加 class="lead"，這將獲得更大更粗、行高更高的文本

HTML 的默認強調標籤 <small>（設置文本爲父文本大小的 85%）、<strong>（設置文本爲更粗的文本）、<em>（設置文本爲斜體）
使用 <address> 標籤，您能夠在網頁上顯示聯繫信息。因爲<address>默認爲 display:block;
能夠在任意的 HTML 文本旁使用默認的 <blockquote>。其餘選項包括，添加一個 <small> 標籤來標識引用的來源，使用 class .pull-right 向右對齊引用網站

列表
有序列表：有序列表是指以數字或其餘有序字符開頭的列表。
無序列表：無序列表是指沒有特定順序的列表，是以傳統風格的着重號開頭的列表。若是您不想顯示這些着重號，您能夠使用 class .list-unstyled 來移除樣式。您也能夠經過使用 class .list-inline 把全部的列表項放在同一行中。
定義列表：在這種類型的列表中，每一個列表項能夠包含 <dt> 和 <dd> 元素。<dt> 表明定義術語，就像字典，這是被定義的屬於（或短語）。接着，<dd> 是 <dt> 的描述。您能夠使用 class dl-horizontal 把 <dl> 行中的屬於與描述並排顯示。
更多排版類scala

bootstrap代碼

Bootstrap 容許您以兩種方式顯示代碼：
第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。

第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 <pre> 標籤。
更多實例

bootstrap表格

標籤	描述
`<table>`	爲表格添加基礎樣式。
`<thead>`	表格標題行的容器元素（`<tr>`），用來標識表格列。
`<tbody>`	表格主體中的表格行的容器元素（`<tr>`）。
`<tr>`	一組出如今單行上的表格單元格的容器元素（`<td>` 或 `<th>`）。
`<td>`	默認的表格單元格。
`<th>`	特殊的表格單元格，用來標識列或行（取決於範圍和位置）。必須在 `<thead>` 內使用。
`<caption>`	關於表格存儲內容的描述或總結。

<table class="table">
  <caption>基本的表格佈局</caption>
  <thead>
    <tr>
      <th>名稱</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tanmay</td>
      <td>Bangalore</td>
    </tr>
    <tr>
      <td>Sachin</td>
      <td>Mumbai</td>
    </tr>
  </tbody>
</table>

更多表格類