2. 程式人生 > 實用技巧 >前端框架—Bootstrap

前端框架—Bootstrap

阿新 • • 發佈：2020-08-08

目錄

一、Bootstrap簡介

1、Bootstrap頁面基本模板

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <!--以最高的ie瀏覽器渲染-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--視口裝置 移動裝置優先 支援移動端 在多個裝置上適應 PC iphone android-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個meta標籤必須放在最前面，任何其他內容都必須在後面！ -->
        <title>Bootstrap Template</title>
        <!-- Bootstrap 必須引入Bootstrap-->
        <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
        <link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/css/bootstrap.css">
 
        <!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支援 HTML5 元素和媒體查詢（media queries）功能 -->
        <!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <[endif]-->
    </head>
    <body>
        <!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
        <!--<script src="jquery.min.js"></script>-->
        <!-- 載入 Bootstrap 的所有 JavaScript 外掛。也可以只加載單個外掛。 -->
        <!--<script src="bootstrap.min.js"></script>-->
    </body>
</html>

視口：視口就是viewport，指的是網頁中看到部分，通常與瀏覽器視窗相同，但不包括瀏覽器的 UI， 選單欄等——即指你正在瀏覽的文件的那一部分。

條件註釋：相容IE9一下的瀏覽器，讓其相容響應式。

<!--[if lt IE 9]>
      <script src="html5shiv.min.js"></script>
      <script src="respond.min.js"></script>
<![endif]-->

以下部分內容見官方文件https://v3.bootcss.com/css/#responsive-utilities

二、全域性CSS樣式

1、HTML5文件

Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設定為 HTML5 文件型別。

2、移動裝置優先

Bootstrap是移動裝置優先的，為了確保適當的繪製和觸屏縮放，需要在 <head> 之中新增 viewport 元資料標籤。

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

在移動裝置瀏覽器上，通過為視口（viewport）設定 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的網站看上去更像原生應用的感覺。這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！

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

3、排版與連結

Bootstrap 排版、連結樣式設定了基本的全域性樣式。分別是：

  • 為 body 元素設定 background-color: #fff;
  • 使用 @font-family-base、@font-size-base 和 @line-height-base 變數作為排版的基本引數
  • 為所有連結設定了基本顏色 @link-color ，並且當連結處於 :hover 狀態時才新增下劃線

這些樣式都能在 scaffolding.less 檔案中找到對應的原始碼。

4、Normalize.css

為了增強跨瀏覽器表現的一致性，我們使用了 Normalize.css，這是由 Nicolas Gallagher 和 Jonathan Neal 維護的一個CSS 重置樣式庫。（要飯強）

三、佈局容器

Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種 容器類不能互相巢狀。

.container 類用於固定寬度並支援響應式佈局的容器。

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

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

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

四、柵格系統

Bootstrap 提供了一套響應式、移動裝置優先的流式柵格系統，隨著螢幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的佈局。

1、簡介

柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面佈局，你的內容就可以放入這些建立好的佈局中。

基本工作原理：

  • “行（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-* 不存在， 也影響大螢幕裝置。

2、媒體查詢

在柵格系統中，在less檔案中使用以下媒體查詢（media query）來建立關鍵的分界點閾值。

/* 超小螢幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的程式碼，因為這在 Bootstrap 中是預設的（還記得 Bootstrap 是移動裝置優先的嗎？） */

/* 小螢幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等螢幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大螢幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }

偶爾也會在媒體查詢程式碼中包含 max-width 從而將 CSS 的影響限制在更小範圍的螢幕大小之內。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

3、柵格引數

4、例項：從堆疊到水平排列

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

5、 例項：流式佈局容器

將最外面的佈局元素 .container 修改為 .container-fluid，就可以將固定寬度的柵格佈局轉換為 100% 寬度的佈局。

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

6、例項：移動裝置和桌面螢幕

是否不希望在小螢幕裝置上所有列都堆疊在一起？那就使用針對超小螢幕和中等螢幕裝置所定義的類吧，即 .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>

7、 例項：手機、平板、桌面

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

8、例項：多餘的列（column）將另起一行排列

如果在一個 .row 內包含的列（column）大於12個，包含多餘列（column）的元素將作為一個整體單元被另起一行排列。

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

9、響應式列重置

即便有上面給出的四組柵格class，你也不免會碰到一些問題，例如，在某些閾值時，某些列可能會出現比別的列高的情況。為了克服這一問題，建議聯合使用 .clearfix 和 響應式工具類。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

除了列在分界點清除響應， 您可能需要 重置偏移, 後推或前拉某個列。請看此柵格例項。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

10、 列偏移

使用 .col-md-offset-* 類可以將列向右側偏移。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距（margin）。例如，.col-md-offset-4 類將 .col-md-4 元素向右側偏移了4個列（column）的寬度。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

11、列巢狀

為了使用內建的柵格系統將內容再次巢狀，可以通過新增一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-* 元素內。被巢狀的行（row）所包含的列（column）的個數不能超過12（其實，沒有要求你必須佔滿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>

12、列排序

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列（column）的順序。

<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、標題

<h1> 到 <h6> 均可使用。另外，還提供了 .h1 到 .h6 類，為的是給內聯（inline）屬性的文字賦予標題的樣式。

在標題內還可以包含 <small> 標籤或賦予 .small 類的元素，可以用來標記副標題。

<h2>二級標題<small>副標題</small></h2>

2、頁面

　Bootstrap 將全域性 font-size 設定為 14px，line-height 設定為 1.428（黃金分隔比例）。這些屬性直接賦予 <body> 元素和所有段落元素。另外，<p> （段落）元素還被設定了等於 1/2 行高（即 10px）的底部外邊距（margin）。在頁面寫入p標籤，可以在控制檯看到p標籤的樣式資訊如下：

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}　

1、中心內容

通過新增 .lead 類可以讓段落突出顯示。

<p>我是<span class="lead">頁面</span>主題</p>

2、使用Less工具構建

variables.less 檔案中定義的兩個 Less 變數決定了排版尺寸：@font-size-base 和 @line-height-base。第一個變數定義了全域性 font-size 基準，第二個變數是 line-height 基準。我們使用這些變數和一些簡單的公式計算出其它所有頁面元素的 margin、 padding 和 line-height。自定義這些變數即可改變 Bootstrap 的預設樣式。

3、內聯文字

1、marked text<mark>標籤高亮文字)

<p>
    <mark>高亮文字</mark>
</p>

高亮文字

2、被刪除的文字（<del>標籤）

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

被刪除的文字

3、無用文字

對於沒用的文字使用 <s> 標籤，效果同<del>相似。

4、插入文字

額外插入的文字使用 <ins> 標籤。具有下劃線效果。

插入的文字

5、下劃線文字

為文字新增下劃線，使用 <u> 標籤。利用 HTML 自帶的表示強調意味的標籤來為文字增添少量樣式。

6、小號文字

對於不需要強調的inline或block型別的文字，使用 <small> 標籤包裹，其內的文字將被設定為父容器字型大小的 85%。標題元素中巢狀的 <small> 元素被設定不同的 font-size 。

還可以為行內元素賦予 .small 類以代替任何 <small> 元素。

7、著重

通過增加 font-weight 值強調一段文字。 <strong></strong>

8、斜體

用斜體強調一段文字<em></em>

強調文字

在 HTML5 中可以放心使用 <b> 和 <i> 標籤。<b> 用於高亮單詞或短語，不帶有任何著重的意味；而 <i> 標籤主要用於發言、技術詞彙等。

4、對齊

<div class="col-md-4">
    <!--左對齊、中心對齊、右對齊-->
    <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>
</div>

同時還可以發現，div盒子都有15px內白間隔：padding-right: 15px; padding-left: 15px;

5、改變大小

<!--小寫-->
<p class="text-lowercase">Lowercased text.</p>
<!--大寫-->
<p class="text-uppercase">Uppercased text.</p>
<!--大寫字母開頭-->
<p class="text-capitalize">Capitalized text.</p>

6、引用

使用<blockquote></blockquote>

引用的內容

命名來源

新增<footer></footer>用於表名引用來源，來源的名稱可以包裹進<cite>標籤中。

<blockquote>
    <footer><cite title="Source Title">Source Title</cite></footer>
</blockquote>

使用者輸入

通過<kbd>標籤標記使用者通過鍵盤輸入的內容。

shift

程式碼

<code>標籤

print('hello')

程式碼塊

多行程式碼可以使用 <pre> 標籤。為了正確的展示程式碼，注意將尖括號做轉義處理。

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

<p>Sample text here...</p>

還可以使用 .pre-scrollable 類，其作用是設定 max-height 為 350px ，並在垂直方向展示滾動條。

變數

<var>標籤有傾斜效果

<var>z=x+y</var>

z=x+y

六、表格

1、基本表格

為任意 <table> 標籤新增 .table 類可以為其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。

<div class="col-md-4">
    <table class="table">
        <thead>
            <tr>
                <th>編號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>身高</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小馬哥</td>
                <td>18</td>
                <td>180</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小馬哥</td>
                <td>18</td>
                <td>180</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小馬哥</td>
                <td>18</td>
                <td>180</td>
            </tr>
            <tr>
                <td>4</td>
                <td>小馬哥</td>
                <td>18</td>
                <td>180</td>
            </tr>
        </tbody>
    </table>
</div>

2、條紋狀表格

通過 .table-striped 類可以給 <tbody> 之內的每一行增加斑馬條紋樣式。

　　注意（跨瀏覽器相容性）：條紋狀表格是依賴 :nth-child CSS 選擇器實現的，而這一功能不被 Internet Explorer 8 支援。

<table class="table table-striped">
  ...
</table>

3、帶邊框的表格

新增 .table-bordered 類為表格和其中的每個單元格增加邊框。

<table class="table table-bordered">
  ...
</table>

4、滑鼠懸停

通過新增 .table-hover 類可以讓 <tbody> 中的每一行對滑鼠懸停狀態作出響應。

<table class="table table-hover">
  ...
</table>

5、緊縮表格

通過新增 .table-condensed 類可以讓表格更加緊湊，單元格中的內補（padding）均會減半。

<table class="table table-condensed">
  ...
</table>

6、 狀態類

通過這些狀態類可以為行或單元格設定顏色。

Class 描述
.active 滑鼠懸停在行或單元格上時所設定的顏色
.success 標識成功或積極的動作
.info 標識普通的提示資訊或動作
.warning 標識警告或需要使用者注意
.danger 標識危險或潛在的帶來負面影響的動作 
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

七、表單

1、基本表單

單獨的表單控制元件會被自動賦予一些全域性樣式。所有設定了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被預設設定寬度屬性為 width: 100%;。 將 label 元素和前面提到的控制元件包裹在 .form-group 中可以獲得最好的排列。

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

相關推薦

前端框架—Bootstrap

目錄一、Bootstrap簡介1、Bootstrap頁面基本模板二、全域性CSS樣式1、HTML5文件2、移動裝置優先3、排版與連結4、Normalize.css三、佈局容器四、柵格系統1、簡介2、媒體查詢3、柵格引數4、例項：從堆疊到水平排列5、

jQuery使用 前端框架Bootstrap

目錄 jQuery查詢標籤 1.基本選擇器 2.組合選擇器 3.後代選擇器 4.屬性選擇器 5.基本篩選器

前端框架 —— bootstrap介紹

前端框架 —— bootstrap介紹 bootstrap安裝 我們可以通過官網下載bootstrap的程式碼到本地，也可以通過CDN分發網路引入我們的html檔案。

BootStrap前端框架使用方法詳解

1.概念： Bootstrap，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。

CSS3知識回顧（13）+Bootstrap前端框架

技術標籤：CSS部落格美化 規範 git指令git commit的規範化 檢視資訊響應式佈局Bootstrap前端框架柵格系統（grip system）響應式工具

前端之Bootstrap框架

前端之Bootstrap框架 目錄前端之Bootstrap框架一、Bootstrap簡介二、環境配置三、全域性CSS樣式1、佈局容器2、柵格系統3、柵格引數4、排版5、表格6、表單7、按鈕8、圖表四、元件1、導航條2、分頁器3、彈框五、案例

書寫三層結構的模態框 編寫簡易部落格園介面 前端框架之Bootstrap

今日內容概要 書寫三層結構的模態框 編寫簡易部落格園介面(重點掌握) 前端框架之Bootstrap(有趣重點)

幾種流行的前端框架（BootStrap、Layui、Element-UI、Mint UI、Angular、Vue.js、React）

1.BootStrap讓你的頁面更簡潔、直觀、強悍、移動裝置優先的前端開發框架，讓web開發更迅速、更簡單。它還提供了更優雅的HTML和CSS規範，它即是由動態的CSS語言LESS寫成。有著豐富的網路佈局系統以及豐富的可重用元件

前端 框架之bootstrap

內容概要 前端框架之bootstrap 內容詳細 前端框架 Bootstrap框架 2.X 3.X 4.X# 推薦使用3.X版本

Vue.js前端框架系統學習（4）——Vue指令之v-text,v-html,v-if,v-show

寫在前面的話：繼續上一篇文章，來學習一下vue的指令。 指令 指令 (Directives) 是帶有 v- 字首的特殊 attribute。指令 attribute 的值預期是單個 JavaScript 表示式 (v-for 是例外情況)。指令的職責是，當表示式的

自動化測試平臺（Vue前端框架安裝配置）

Vue簡介： 通俗的來說Vue是前端框架，用來寫html的框架，可輕量級也可不輕量級

前端框架-jQuery自學筆記

What\'s jQuery jq就是一個封裝了很多方法的js庫。 Why use jQuery 原生js的缺點 不能新增多個入口函式(window.onload),如果新增多個,後面會把前面的覆蓋

客車網上售票系統—前端框架選型AdminLTE（二）

一、AdminLTE簡介 　　AdminLTE是一個完全響應管理模板。基於Bootstrap4，jQuery 3這兩個框架框架，易定製模板。適合多種螢幕解析度，從小型移動裝置到大型桌上型電腦。內建了多個頁面，包括儀表盤、郵箱、日曆、鎖屏

實現前端框架資料繫結（資料驅動DOM）

一： 完整程式碼 function$(element){//傳入響應式區域的dom根節點，返回響應式資料

Vue.js前端框架系統學習（7）——計算屬性computed

計算屬性 寫在前面：今天來整理一下計算屬性的語法和具體用例。 計算屬性 正如官網上所說的：

前端之BootStrap的簡單應用

1 <!DOCTYPE html> 2 <html lang=\"zh-CN\"> 3 4<head> 5<meta charset=\"utf-8\"> 6<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">

vue前端框架搭建

最新在學習vue，自己總結一下使用vue的腳手架搭建前端工程的步驟 1.下載Nodejs

Vue.js前端框架系統學習（8）——slot插槽

slot插槽 下述內容引用自官網： 在 2.6.0 中，我們為具名插槽和作用域插槽引入了一個新的統一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個目前已被廢棄但未被移除且仍在文件中的 attribute。

面試題------前端框架與其他

第四部分 前端、框架和其他（155題） 談談你對http協議的認識。 談談你對websocket協議的認識。

ant-design-pro 前端框架視訊進階學習

觀看教學視訊 package.json 使用的前端技術依賴外掛 佈局 主頁 中間使用的 左右伸拉布局 類似於 Layopu佈局的側邊佈局