【Bootstrap5】精細學習記錄

kernel_developer發表於2021-05-10
boot

【Bootstrap5】精細學習記錄

Bootstrap模板

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shiv 和 Respond.js 用於讓 IE8 支援 HTML5元素和媒體查詢 -->
      <!-- 注意： 如果通過 file://  引入 Respond.js 檔案，則該檔案無法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>
 
      <!-- jQuery (Bootstrap 的 JavaScript 外掛需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已編譯的外掛 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

Bootstrap一切以原始碼為重，大體和html差不多（其中網格系統算是創新且重要的），需要時查原始碼。

Bootstrap特性

移動裝置優先

響應式影像

全域性顯示、排版和連結

等……

具體可見菜鳥教程

多閱讀原始碼！

Bootstrap網格系統

網格系統將container容器分為12列，行row最好在container內，列在行row內，再通過"col--"定義在不同視口情況下佔的列數。

基本網格結構：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

Bootstrap v5.0.0原始碼：

可以通過以下程式碼，不斷調整視口大小自己感覺。

<!DOCTYPE html>
<html lang="zn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>bootstrap-learning</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <h1>hello world</h1>
    <div class="container">
        <div class="row">
            <div class="col-md-1 col-lg-6 col-sm-3 col-xxl-4 col-xl-5"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                nisi ut aliquip ex ea commodo consequat. 
                </p>
    
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                accusantium doloremque laudantium, totam rem aperiam, eaque ipsa 
                quae ab illo inventore veritatis et quasi architecto beatae vitae 
                dicta sunt explicabo. 
                </p>
            </div>
    
            <div class="col-md-1 col-lg-6 col-sm-3 col-xxl-4 col-xl-5" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                accusantium doloremque laudantium.
                </p>
    
                <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
                consectetur, adipisci velit, sed quia non numquam eius modi 
                tempora incidunt ut labore et dolore magnam aliquam quaerat 
                voluptatem. 
                </p>
            </div>
        </div>
    </div>
</body>
</html>

列偏移

即設定列的margin-left，通過查閱原始碼，bootstrap5.0.0可以通過

offset-i  i偏移的列數（0，11）
offset-xx-i xx:md,sm,···

列巢狀

顧名思義，在row裡面再填列row就可以了。

新列的網格系統均參考父元素。

列排序

Bootstrap5.0.0中，排序使用order

order-i  i表示順序
order-xx-i  xx:md,sm,···
預設順序層級相同，層級相同時，靠前的排前面

Bootstrap排版

text

Bootstrap5.0.0原始碼：

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/* rtl:end:remove */
.text-primary {
  color: #0d6efd !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #198754 !important;
}

.text-info {
  color: #0dcaf0 !important;
}

.text-warning {
  color: #ffc107 !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-light {
  color: #f8f9fa !important;
}

.text-dark {
  color: #212529 !important;
}

.text-white {
  color: #fff !important;
}

.text-body {
  color: #212529 !important;
}

.text-muted {
  color: #6c757d !important;
}

.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.text-reset {
  color: inherit !important;
}

更多可參考這裡，然後多閱讀原始碼就行了。

Bootstrap基礎元件

程式碼

<code>內聯程式碼</code>
<pre>
	程式碼塊
</pre>
程式碼中<: &lt;
	 >: &gt;

表格

實測：Bootstrap5.0.0還有一些bug?

最好先使用Bootstrap3或者4。

--------------------後面以bootstrap3為準--------------------

一些樣式就不說了。

表單

  • 垂直表單（預設）

    <form role="form">
  <div class="form-group">
    <label for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

  • 內聯表單

    <form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="name">名稱</label>
    <input type="text" class="form-control" id="name" placeholder="請輸入名稱">
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

  • 水平表單

    <form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="請輸入名字">
    </div>
  </div>
  <div class="form-group">
    <label for="lastname" class="col-sm-2 control-label">姓</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="lastname" placeholder="請輸入姓">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">登入</button>
    </div>
  </div>
</form>

按鈕

圖片

image-20210509223128734

輔助類

Bootstrap元件

字型圖示

Customize 字形圖示（Glyphicons） - 菜鳥教程 (runoob.com)

下拉選單

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主題
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">下拉選單標題</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分離的連結</a>
        </li>
    </ul>
</div>

​ 通過向 .dropdown-menu 新增 class .pull-right 來向右對齊下拉選單。

···太多了，不想寫了?，菜鳥教程已經寫得很全了，只需要自己注意一下版本問題就行了，下面就記錄一下關鍵類吧！（相信xdm都會vscode的Emmet吧）···

按鈕組

#基本按鈕組
div.btn-group>button[type=button].btn.btn-defualt*3
#按鈕工具欄
div.btn-tool[role=toolbar]>(div.btn-group>button[type=button].btn.btn-default)*3
#按鈕大小
btn-group-xx  xx:sm,lg···
#巢狀
#垂直按鈕組
div.btn-group-vertical>(···)

按鈕下拉選單

基本：

<div class="btn-group">
	<button type="button" class="dropdown-toggle" data-toggle="dropdown">原始 
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li><a href="#">功能</a></li>
		<li class="divider"></li>
		<li><a href="#">分離的連結</a></li>
	</ul>
</div>

按鈕下拉選單大小：

調整按鈕的類即可。

<button type="button" class="btn btn-success dropdown-toggle btn-xs" data-toggle="dropdown">

按鈕上拉選單

向父 .btn-group 容器新增 .dropup 即可。

<div class="btn-group dropup">
</div>

輸入框組

基本輸入框組：

1.把字首或字尾元素放在一個帶有 class .input-group 的 <div> 中。
2.接著，在相同的 <div> 內，在 class 為 .input-group-addon 的 <span> 內放置額外的內容。
3.把該 <span> 放置在 <input> 元素的前面或者後面。
div.input-group>(span.input-group-addon{@}+input[type=text].form-control)

按鈕外掛：

使用.input-group-addon替代.input-group-btn來包裹按鈕
div.input-group>(span.input-group-button{@}+input[type=text].form-control)

導航元素

標籤式導航選單

ul.nav.nav-tabs>(li.active>a[href=#]+(li>a[href=#])*5)

膠囊式導航選單

ul.nav.nav-pills>(li.active>a[href=#]+(li>a[href=#])*5)

垂直導航選單

在使用.nav、.nav-pills或.nav-tabs的同時使用.nav-stacked

兩端對齊導航

在使用.nav、.nav-pills或.nav-tabs的同時使用.nav-justified

選單項內容

.tab-content與.tab-pane和data-toggle="tab" (data-toggle="pill" ) 一同使用, 設定標籤頁對應的內容隨標籤的切換而更改。
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#home">首頁</a></li>
    <li><a data-toggle="tab" href="#menu1">選單 1</a></li>
    <li><a data-toggle="tab" href="#menu2">選單 2</a></li>
    <li><a data-toggle="tab" href="#menu3">選單 3</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>首頁</h3>
      <p>菜鳥教程 —— 學的不僅是技術，更是夢想！！！</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>選單 1</h3>
      <p>這是選單 1 顯示的內容。這是選單 1 顯示的內容。這是選單 1 顯示的內容。</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>選單 2</h3>
      <p>這是選單 2 顯示的內容。這是選單 2 顯示的內容。這是選單 2 顯示的內容。</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>選單 3</h3>
      <p>這是選單 3 顯示的內容。這是選單 3 顯示的內容。這是選單 3 顯示的內容。</p>
    </div>
  </div>

導航欄

預設導航欄

1.向 <nav> 標籤新增 class .navbar、.navbar-default。
2.向上面的元素新增 role="navigation"，有助於增加可訪問性。
3.向 <div> 元素新增一個標題 class .navbar-header，內部包含了帶有 class navbar-brand 的 <a> 元素。這會讓文字看起來更大一號。
4.為了嚮導航欄新增連結，只需要簡單地新增帶有 class .nav、.navbar-nav 的無序列表即可。

響應式導航欄

# <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
    # <div class="collapse navbar-collapse" id="example-navbar-collapse"></div>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切換導航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">菜鳥教程</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分離的連結</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一個分離的連結</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>

表單導航欄

# 在原本標籤位置：
<form class="navbar-form navbar-left" role="search">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
</form>

導航欄按鈕

# 不在form中的button
# .navbar-btn 可被使用在 <a> 和 <input> 元素上。
<button type="button" class="btn btn-default navbar-btn">
    導航欄按鈕
</button>

導航欄文字

<p class="navbar-text">Runoob 使用者登入</p>

導航欄元件對齊

.navbar-left 或 .navbar-right 向左或向右對齊導航欄中的 導航連結、表單、按鈕或文字 這些元件。

導航欄固定在頂底部

# 頂部
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
</nav>
# 底部
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
</nav>
# 隨著頁面移動的頂底部
<nav class="navbar navbar-default navbar-static-top" role="navigation">
</nav>

反色導航欄

<nav class="navbar navbar-inverse" role="navigation">
</nav>

麵包屑組

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

分頁

分頁（Pagination）

ul.pagination>(li>a[href=#]{&laquo;}+(li>a[href=#]{$}*5)+li>a[href=#]{&raquo;})

翻頁（Pager）

ul.pager>(li.previous>a[href=#]{&larr;pre}+li.next>a[href=#]{next&rarr;})

標籤

<span class="label label-default">預設標籤</span>
<span class="label label-primary">主要標籤</span>
<span class="label label-success">成功標籤</span>
<span class="label label-info">資訊標籤</span>
<span class="label label-warning">警告標籤</span>
<span class="label label-danger">危險標籤</span>

徽章

<span class="badge">50</span>
# 當內部為空時，自動隱藏
<span class="badge pull-right">42</span>
# pull-right、pull-left 調整徽章位置
# 相對標籤更圓潤

超大螢幕

1.建立一個帶有 class .jumbotron. 的容器 <div>
2.除了更大的 <h1>，字型粗細 font-weight 被減為 200

頁面標題

如需使用頁面標題（Page Header），請把您的標題放置在帶有 class .page-header 的 <div> 中
div.page-header

縮圖

1.在影像周圍新增帶有 class .thumbnail 的 <a> 標籤。
2.這會新增四個畫素的內邊距（padding）和一個灰色的邊框。
3.當滑鼠懸停在影像上時，會動畫顯示出影像的輪廓。

警告

普通：

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">資訊！請注意這個資訊。</div>
<div class="alert alert-warning">警告！請不要提交。</div>
<div class="alert alert-danger">錯誤！請進行一些更改。</div>

可取消：

# 同時新增alert-dismissable
<div class="alert alert-success alert-dismissable">

進度條

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" 
        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
</div>

其他樣式：

# 在 progress-bar 基礎上新增 progress-bar-* ( * = success、info、warning、danger)
  決定進度條顏色
# 條紋的進度條
  在 progress 基礎上新增 progress-striped
# 運動起來
  在 progress 基礎上新增 active
# 堆疊起來
  div.progress元素內部 新增多個 div.progress-bar

多媒體物件

媒體物件可以用更少的程式碼來實現媒體物件（如：影像、視訊、音訊等）與文字的混排。

<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">左對齊</h4>
    <p>這是一些示例文字...</p>
  </div>
</div>

列表組

ul.list-group>(li.list-group-item)*5

列表組豎直排列，可以使用一下css程式碼獲得水平排列列表組。

.list-group-horizontal .list-group-item {
    display: inline-block;
}
.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
}

皮膚

基本

<div class="panel panel-default">
    <div class="panel-body">
        這是一個基本的皮膚
    </div>
</div>

其他樣式：

panel-primary
panel-success
panel-info
panel-warning
panel-danger

皮膚內部結構：

panel-heading
1.使用 .panel-heading class 可以很簡單地向皮膚新增標題容器。
2.使用帶有 .panel-title class 的 <h1>-<h6> 來新增預定義樣式的標題。
panel-body
panel-footer
其他結構：如： table、ul……

Well

Well 是一種會引起內容凹陷顯示或插圖效果的容器 <div>。

div.well

Bootstrap外掛

待補

相關文章