文章目錄

一、模板
二、布局
- 1、布局容器
- 2、柵欄網格系統
三、樣式
- 1、標題樣式
- 2、段落樣式
- 3、強調
- 4、對齊
四、串列
五、代碼風格(標簽)
六、表格風格
七、表單控制元件
- 1、文本框、下拉框
- 2、單選框、復選框
- 3、按鈕

一、模板

在html頁面中引入模板

<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必須的 meta 標簽 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap 的 CSS 檔案 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <title>Hello, world!</title>
</head>
<body>

<!-- jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</body>
</html>

二、布局

1、布局容器

頁面的所有內容都放在此容器中

container:固定寬度并支持回應式布局的容器 (兩側會有留白)

container-fluid:100%寬度

2、柵欄網格系統

row 要放到容器(container)中
將容器平分為12份列總和不能超過12
row：行

col：列

col-{breakpoint}-auto ：根據列內容的自然寬度調整列的大小
例：col-md-auto

col-*-#：該系統從堆疊開始，在斷點處變為水平
*分為：xs、sm、md、lg 即超小(自動)、小、中、大
# 為數字 0-12 一行上列的總數不能超過12，否則會換行
例：col-md-4 、col-sm-8

col-*-offset-#：列偏移#個位置(不會覆寫一起偏移)
col-*-offset-push-#：右浮動(會覆寫)
col-*-offset-pull-#：左浮動(會覆寫)

<div class="container">
    <div class="row">
        <div class="col-md-4" style="background-color: #d4d4d4">4</div>
        <div class="col-md-8" style="background-color: #d43f3a">8</div>
    </div>
    <div class="row">
        <div class="col-lg-4" style="background-color: #ffff00">4</div>
        <div class="col-lg-4" style="background-color: #378637">4</div>
        <div class="col-lg-4" style="background-color: #dd44ff">4</div>
    </div>
    <div class="row">
        <div class="col-sm-1" style="background-color: #009dff">1</div>
        <div class="col-sm-2 col-sm-offset-2" style="background-color: rgba(255,229,125,0.39)">2</div>
      <div class="col-sm-3 col-sm-push-2" style="background-color: #d4d4d4">3</div>
    </div>
</div>

在這里插入圖片描述

三、樣式

1、標題樣式

h1~h6：設定標題(標簽樣式稍作修改)
small：副標題

2、段落樣式

lead：增大文本

3、強調

text-muted：提示效果
text-primary：主要效果
text-success：成功效果
text-info：資訊效果
text-warning：警告效果
text-danger：危險效果

例：

<div class="container">
    <p class="text-muted">提示</p>
    <p class="text-primary">主要</p>
    <p class="text-success">成功</p>
    <p class="text-info">資訊</p>
    <p class="text-warning">警告</p>
    <p class="text-danger">危險</p>
</div>

在這里插入圖片描述

4、對齊

text-left：左對齊
text-center：居中對齊
text-right：右對齊
text-justify：兩端對齊

四、串列

無序(ul)、有序(ol)、定義(dl)
list-unstyled：去點串列
list-inline：行內串列水平方向且去點
dl-horizontal：水平定義串列

<div class="container">
    <ul class="list-unstyled">
        <li>C++</li>
        <li>Java</li>
        <li>Python</li>
    </ul>

    <ol class="list-inline">
        <li>C++</li>
        <li>Java</li>
        <li>Python</li>
    </ol>

    <dl class="dl-horizontal">
        <dt>語言</dt>
        <dd>C++</dd>
        <dd>Java</dd>
        <dd>Python</dd>
        <dt>作者</dt>
        <dd>001</dd>
        <dd>002</dd>
        <dd>003</dd>
    </dl>
</div>

在這里插入圖片描述

五、代碼風格(標簽)

code：單行行內代碼
pre：多行快代碼
kbd：快捷鍵

<div class="container">
   <code> A a =new A();</code>
    <pre>
        public static void main(String []args){
            System.out.println("Hello World!");
        }
    </pre>
    <p><kbd>ctrl</kbd>+<kbd>s</kbd>保存</p>
</div>

在這里插入圖片描述

六、表格風格

table：基礎表格

(1) table樣式
table-striped：斑馬線表格
table-bordered：帶邊框的表格
table-hover：滑鼠懸停高亮的表格
table-condensed：緊湊型表格，單元格沒有內距(內距小)

(2)tr th td樣式
active：將懸停的顏色應用在行或者單元格上
success：表示成功的操作
info：表示資訊變化的操作
warning：表示一個警告的操作
danger：表示一個危險的操作

<div class="container">
    <table class="table table-striped table-hover table-condensed">
        <tr class="info">
            <th class="warning">JavaSE</th>
            <th class="danger">JavaEE</th>
            <th class="success">JavaMe</th>
        </tr>
        <tr class="active">
            <td>Math</td>
            <td>Spring</td>
            <td>API</td>
        </tr>
        <tr class="success">
            <td>Date</td>
            <td>Hibernate</td>
            <td>KVM</td>
        </tr>
    </table>
</div>

在這里插入圖片描述

七、表單控制元件

1、文本框、下拉框

form-control：定義樣式
input-lg\sm：定義大小

<div class="container">
    <label>
        <input type="text" placeholder="請輸入" class="form-control input-lg"/>
    </label><br>
    <label>
        <select class="input-sm">
            <option>C++</option>
            <option>Python</option>
            <option>Java</option>
        </select>
    </label>
    <label>
        <textarea class="input-sm" placeholder="請輸入" style="resize: none"></textarea>
    </label>
</div>

在這里插入圖片描述

2、單選框、復選框

checkbox：好看點
checkbox-inline：水平顯示

3、按鈕

btn系列類

btn-lg/sm：設定按鈕尺寸
例：

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404156.html

標籤：其他

上一篇：微信小程式滑塊驗證方法

下一篇：走進前端——CSS(1)

Bootstrap學習筆記

文章目錄

一、模板

二、布局

1、布局容器

2、柵欄網格系統

三、樣式

1、標題樣式

2、段落樣式

3、強調

4、對齊

四、串列

五、代碼風格(標簽)

六、表格風格

七、表單控制元件

1、文本框、下拉框

2、單選框、復選框

3、按鈕