組件

1 常用組件

2 其它組件

封裝功能性的模塊，按照boot要求的層次結構以及類名套用

1 常用組件

下拉菜單

下拉菜單的三級結構：

	<div clss="dropdown">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">菜單1</a>
            <a href="#" class="dropdown-item">菜單2</a>
            <a href="#" class="dropdown-item">菜單3</a>
        </div>
    </div>

1.使用一個類名爲dropdown的容器包裹整個下拉菜單的元素

  <div class="dropdown"></div>

2.內部菜單按鈕
class="dropdown-toggle"作用：向下的小箭頭
事件激活自定義屬性 data-toggle=“dropdown”

<button class="btn btn-warning
	dropdown-toggle" data-toggle="dropdown">下拉菜單</button>

3.菜單欄 div.dropdown-menu
下拉菜單使用了div/ul，類名爲dropdown-menu

	       <div class="dropdown-menu"></div>
	        <ul class="dropdown-menu"></ul>

4.菜單項使用li或者其它標籤，必須設置類名dropdown-item

    <a href="#" class="dropdown-item">1111</a>
    <li class="dropdown-item">1111</li>

5.菜單項中幾個可選的類名
標題：<li class=“dropdown-header”>
在菜單項之間分割線：<div class=“dropdown-divider”>
禁用：<li class=“dropdown-item disabled”>
激活：<li class=“dropdown-item active”>

提示：data-toggle=“dropdown”,會被bootstrap.min.js選中,添加事件監聽；boot爲我們提供了按照下拉菜單的方式去切換數據(顯示或隱藏)

按鈕組

外包裹添加<div class=“btn-group”>分組
按鈕工具欄 btn-toolbar
設置按鈕大小.btn-group-lg|sm
垂直排列<div class=“btn-group-vertical”>

<div class="btn-group-vertical">
    <button class="btn btn-success btn-group-sm">贊</button>
    <button class="btn btn-danger btn-group-lg">踩</button>
    <button class="btn btn-warning btn-group-xl">評</button>
</div>

信息提示框

1.外包裹class=“alert”
修改顏色alert-danger/warning…
內部x要使用類.class需要在父級添加alert-dismissible
2.內部有文本提示
3.內部有關閉提示框的X
data-dismiss=“alert” class=“close”

<div class="alert alert-danger w-50 alert-dismissible">
    <span class="close" data-dismiss="alert">&times;</span>
    請檢查用戶信息
</div>

data-dismiss="alert"事件觸發，觸發了駁回關閉alert的事件；
注意：span想使用close類，外包裹必須有alert-dismissible

Bootstrap提供三種導航
1）水平導航：
ul.class=“nav”;元素變成
li中class=“nav-item”
a.class=“nav-link”
元素ul的類：
nav-justified設置導航項等寬顯示(爲了讓nav-item有樣式)
justify-content-*：between/around/center/end；設置導航的對齊方式，flex的主軸對齊，所以使用前需要把.nav-justified刪除；
flex-row/column/reverse都可以生效；

2）選項卡導航：
選項卡導航分爲兩部分——導航部分和顯示內容
導航部分：
ul必須有類名：nav nav-tabs
li必須有類名：nav-item
a必須有類名：nav-link
a有自定義屬性data-toggle=“tab”，事件觸發後以tab的方式切換數據；
a的href屬性指向想要顯示內容的id
顯示內容：
外層div必須有類名tab-content，本身沒有樣式
內層具體內容類名tab-pane---->display:none
具體內容的元素必須具有id，給a標籤href引用
active類，用於默認顯示某個元素內容以及對應導航欄

3）膠囊導航
ul的類nav nav-pills
li的類nav nav-item
a的類 nav-link
a的自定義屬性 data-toggle=“pill”
a的href指向內容的id
內容部分同選項卡導航

導航欄

外包裹div使用.navbar來創建導航欄(彈性+相對定位)
需要navbar-expand-xl/lg/md/sm來創建響應式導航欄，將ul類默認的主軸變爲row
navbar-expand-* 比指定屏幕更大展開橫向顯示
比指定屏幕小垂直堆疊顯示
導航欄內部的導航可以使用ul
ul需要類 navbar-nav，默認彈性，主軸column
li的類 nav-item
a的類 nav-link
注意：可以給導航欄設置bg-*導航欄背景色

摺疊

使用a標籤摺疊內容
a標籤data-toggle=“collapse"事件激活時，使用摺疊的方式去切換數據，摺疊的目標href=”#內容id"；
內容的標籤，必須寫class=“collapse”，id被a標籤的href引用；
使用button標籤(行內塊)摺疊內容
在button中添加data-toggle=“collapse"和摺疊目標data-target=”#id"，#id對應摺疊內容的id
在摺疊內容中定義collapse類
由於button沒有href屬性，使用自定義屬性
data-target="#內容id"，
其它寫法與a標籤一樣

摺疊導航欄

外層包裹div class=“navbar navbar-expand-sm bg-dark navbar-dark”
導航欄基礎類navbar
響應式導航欄 navbar-expand-sm
背景顏色爲深色bg-dark
navbar-dark本身沒有樣式，作爲後代選擇器的父選擇器，控制後代們的樣式(navbar-brand nav-link navbar-toggler-icon navbar-toggler)
不會被摺疊的a標籤
a class=“navbar-brand”
摺疊按鈕button.navbar-toggler
.navbar-expand-* .navbar-toggler{設置什麼時候顯示/隱藏}
btn需要寫自定義屬性data-toggle=“collapse” data-target="#內容-id"

內容div.collapse .navbar-collapse
.navbar-collapse設置摺疊導航打開的位置；
導航的內容：
ul.navbar-nav>li.nav-item>a.nav-link

   <div class="navbar navbar-expand-md bg-dark
    navbar-dark">
        <!-- 不被摺疊的導航選項-->
        <a href="#" class="navbar-brand">Boot中文網</a>
        <!-- 小屏幕下最右側的按鈕：上面有三條橫線-->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#content">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 導航欄中的菜單，小屏幕隱藏(垂直顯示)，大屏幕橫向顯示-->
        <div class="collapse navbar-collapse" id="content">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">JQuery</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">JavaScript</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">HTML/CSS</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">BootStrap</a>
                </li>
            </ul>
        </div>
    </div>

卡片

用於文字和圖片的展示
外包裹div class=“card”
內部3部分

div class=“card-header”
div class=“card-body”
div class=“card-footer”

在卡片中可以添加超鏈接，a class=“card-link”

手風琴(卡片和摺疊)

最外層div#parent，id是爲了做data-parent="#parent"，目的是隻允許一個摺疊同時打開(需要在摺疊元素上添加data-parent="#parent"外層大包裹的ID)
duv.card>div.card-header>a.card-link
a標籤中寫摺疊事件和摺疊對象
data-toggle=“collapse” hredf="#p1"
摺疊內容
div.collapse#p1>div.card-body>p

注意，.card-body和.collapse不能在同一個div，衝突導致卡頓

<div id="parent">
    <div class="card">
        <div class="card-header">
            <a  class="card-link" href="#p1" data-toggle="collapse">卡片一</a>
        </div>
        <div class="collapse show" id="p1" data-parent="#parent">
            <div class="card-body">
                內容一：我愛學習
            </div>
        </div>
    </div>

媒體對象

使用div class="media"把內容包裹起來，形成對象的顯示方式，定義彈性佈局；
項目有img，div.media-body，內部元素可以使用彈性佈局一切類align-self-center/end/…對齊排列

    <ul class="list-unstyled">
        <li>
            <div class="media border p-3">
                <img src="../bootstrap1/img/1.jpg"
                     class="rounded mr-4 align-self-center"/>
                <div class="media-body bg-light">
                    <h4>多媒體</h4>
                    <p>學的不僅是技術，更是夢想！！！</p>
                </div>
            </div>
        </li>
</ul>

輪播

外包裹
div class=“carousel” data-ride=“carousel”
創建輪播，使用carousel類，讓圖片動起來data-ride=“carousel”
內部第一層，輪播圖片
```
<div class="carousel-inner">
  <div class="carousel-item active">img</div>
  <div class="carousel-item">img</div>
  <div class="carousel-item">img</div>
</div>
```
使用類名div.carousel-inner包裹所有圖片，
使用div.carousel-item包裹img,
carousel-item ---->display:none;把所有圖片隱藏
.carousel-item.active 會把隱藏的div顯示
在carousel-item內部，可以添加div.carousel-caption添加文字和標題
內層第二部分，導航標識符
使用ul class=“carousel-indicators”
.carousel-indicators>li 樣式已經寫好，並且隨着圖片輪播，改變表示，還不能通過點擊改變圖片
li class=“active” 背景變爲白色，被激活的li
在li中 data-slide-to=“0” 圖片的下標，從0開始
data-target="#最外層包裹.carousel的ID"
重寫boot提供的樣式，讓指示器變爲圓點，背景顏色
內部第三部分：左右箭頭
a class=" carousel-control-prev"
左箭頭<span class="carousel-control-prev-icon">
a class=" carousel-control-next"
右箭頭<span class="carousel-control-next-icon">
需要事件，data-slide=“prev/next” data-target="#最外層包裹.carousel的ID"

總結：bootstrap爲我們提供了比較多的樣式類，如果提供的樣式不符合我們的需求，我們可以靈活的取修改樣式

模態框

modal模態框是覆蓋在父窗體上的子窗體，可以在不離開父窗體的情況下，與用戶交互，提交交互信息
1.外包裹div.modal
2.內部div.modal>div.modal.dialog>div.modal-content>modal-header/body/footer

2 其它組件

徽章badge

即添加顏色樣式和圓角

<ul class="list-group list-unstyled">
    <li class="list-group-item">贊
        <a href="#" class="badge badge-pill btn-danger">365</a></li>
</ul>

巨幕

巨大邊框.jumbotron

分頁

外包裹pagination創建分頁
使用pagination-lg/sm設置分頁條大小
內部li.page-item>a.page-link
使用active和disabled修飾li

<ul class="pagination pagination-sm">
    <li class="page-item disabled mr-2"><a href="#" class="page-link">上一頁</a></li>
    <li class="page-item active"><a href="#" class="page-link">1</a></li>
    <li class="page-item ml-2"><a href="#" class="page-link">下一頁</a></li>
</ul>

麪包屑導航

常用於有層次關係的導航
ul.breadcrumb>li.breadcrumb-item>a
改變item連接符號：
.breadcrumb-item + .breadcrumb-item::before {content: “/”;}

進度條

外層包裹div.progress(進度條槽)
普通進度條div.progress-bar
條紋進度條div.progress-bar-striped
動畫進度條progress-bar-animated添加在條紋進度條的div才能看到效果
w-* 設置進度，bg-* 設置進度條顏色
同一進度條下調整不同區間顏色只需要在同一div.progress寫不同寬度的進度條

Bootstrap_2.組件

組件

1 常用組件

下拉菜單

按鈕組

信息提示框

導航

導航欄

摺疊

摺疊導航欄

卡片

手風琴(卡片和摺疊)

媒體對象

輪播

模態框

2 其它組件

徽章badge

巨幕

分頁

麪包屑導航

進度條

JS_core_1.RegExp,Function

NPM模塊 Webpack的使用

Bootstrap_2.組件

Bootstrap_3.SCSS、Bootstrap定製

Bootstrap_1.響應式網頁、Bootstrap、全局CSS樣式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結