bootstrap組件

時間 2019-11-24

原文原文鏈接

bootstrap組件：

一些零件的組合（包括字體圖標、下拉菜單、警告框、彈出框）；css
一個網站、一個APP或者一個系統的構建基礎jquery

如下列舉了部分常見的組件的源代碼及解析bootstrap

1.怪異的屬性-特殊屬性

一、role： HTML5的標籤屬性，標識普通標籤使其語義化，方便瀏覽器對其具體功能進行識別，給特定的瀏覽器使用好比盲文瀏覽器。
二、aria-label：用在輸入框，當焦點落到輸入框時讀屏軟件可讀出輸入框的內容，配合讀屏軟件使用。
三、tabIndex：設置鍵盤的Tab鍵在控件中的移動，就是焦點的移動順序，方便一些有障礙的人士瀏覽網頁。
四、data-：HTML5新增的用於自定義的屬性，不影響頁面顯示，管理本身想要實現的數據傳遞，包括數據交互的一些效果。涉及組件交互，好比下拉菜單、點擊等。api

2.字體圖標

使用span標籤進行包裝，引入想要使用字體圖標的類名。須要在head引入bootstrap.min.css。如：字體圖標class： glyphicon
星形class： glyphicon-star瀏覽器

<head>

<link href="css/bootstrap.min.css" rel="stylesheet"/>
    <style>
    .glyphicon-asterisk{
        color: #02a6e3;
        font-size: 100px;
    }
    </style>
</head>
<body>
<button class="btn btn-danger">
    <span class="glyphicon glyphicon-star"></span>這是一個帶星型按鈕</button>
</body>
複製代碼

3.下拉菜單組件

代碼：bash

<link href="css/bootstrap.min.css"rel="stylesheet"/>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">

<div class="dropdown">
    <button class="btn btn-default drop-toggle"  data-toggle="dropdown">這是按鈕
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="http://www.imooc.com">慕課網</a></li>
        <li><a href="http://www.imooc.com">慕課網</a></li>
        <li><a href="http://www.imooc.com">慕課網</a></li>
    </ul>
</div>
複製代碼

注意各層級class不可混餚使用ide

class	做用
dropdown	控制組件爲下拉
caret	按鈕的角標
dropdown-menu	下拉菜單class
dropdown-toggle	按鈕的切換樣式class
data-toggle="dropdown"	按鈕處設置的綁定事件
dropdown-menu-right	右對齊
divider	分隔線

ps：jquery腳本先於bootstrap腳本導入測試

4. ".input-group"控件組

.input-group-addon可放置額外的內容和圖標字體

Bootstrap4.0前寫法
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
</div>
Bootstrap4.0寫法
<div class="input-group">
    <span class="input-group-text" >$</span>
    <input type="text" class="form-control" >
</div>
複製代碼

5.導航

以一個帶有class .nav的無序列表開始
.nav-tabs 表明可切換的導航
.nav-pills 表明膠囊導航
.nav-judtified 使導航垂直，Bootstrap4.0寫法 flex-columnflex

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="http://www.imooc.com">慕課網</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕課網</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕課網</a></li>
</ul>
<ul class="nav nav-pills flex-column">
    <li class="nav-item"><a class="nav-link active" href="http://www.imooc.com">慕課網</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕課網</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕課網</a></li>
</ul>
複製代碼

6.分頁

經常使用於圖片、文字等的分頁狀況。

一樣也可使用-lg/sm顯示按鈕的大小。

屬性	屬性詳情
pagination	父元素中添加表示分頁
pager	放置在翻頁區域，與pagination相對
previous	把連接向左對齊
next	把連接向右對齊
page-header	分頁底部線

<!--正常分頁樣式-->
<ul class="pagination">
    <li class="active"><a href="">首頁</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">尾頁</a></li>
</ul>
<!--正常分頁樣式 end-->

<!--翻頁樣式-->
<div class="page-header" >
    <ul class="pager">
        <li class="previous"><a href="">上一頁</a></li>
        <li class="next"><a href="">下一頁</a></li>
    </ul>
</div>
<!--翻頁樣式 end-->
複製代碼

7.進度條

progress-bar進度條
progress-bar-danger/success/info.... 進度條顏色
progress-bar-striped 進度條斑馬狀漸變

<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar=striped">
            進度條+紅色+斑馬線+寬度60%
    </div>
</div>
複製代碼

8.列表

.list-group 表明列表組
.list-group-item 表明列表項
.badge 表明狀態數badge（例如點讚的人數）
.active 表明選中狀態

<ul class="list-group">
		<li class="list-group-item active">
			這是一個列表
			<span class="badge">10</span>
		</li>
		<li class="list-group-item disabled">
			這是一個列表
			<span class="badge">10</span>
		</li>
		<li class="list-group-item list-group-item-info">
			這是一個列表
			<span class="badge">10</span>
		</li>
		<li class="list-group-item">
			這是一個列表
			<span class="badge">10</span>
		</li>
	</ul>
複製代碼

9.面板

.panel 表明面板
.panel-heading 表明面板頭部
.panel-body 表明面板內容
.panel-footer 表明面板的註腳

<div class="panel panel-default">//-primary、-success、----
    <div class="panel-heading">
            面板頭部
    </div>
    <div class="panel-body">
     面板內容
    </div>
    <div class="panel-footer">
        面板尾部
    </div>
</div>
複製代碼

10.Bootstrap中的插件-data屬性

經過data屬性控制頁面交互

插件引用：

一、bootstrap插件依賴bootstrap.js
二、bootstrap.js基於jQuery（引用jQuery以後才能引入bootstrap.js，注意前後順序不能搞反）注意：不一樣版本的bootstrap.js依賴的jQuery版本不同

data屬性：
一、經過data屬性控制頁面交互
二、
$(document).off('.data-api')解除屬性綁定
data-target="" 指定相應內容的位置
data-toggle=""綁定方法
data-dismiss=""關閉方法

bootstrap4.0寫法
<div >
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">彈窗</button>
</div>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title " id="myModalLabel">標題</h4>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span><span class="sr-only justify-content-center">關閉彈窗</span>
                </button>
            </div>
            <div class="modal-body">慕課網</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<button class="btn btn-danger btn-lg " data-toggle="modal" data-target="#danger">
    這是測試按鈕
</button>
<div  id="danger">
    這是內容
</div>
複製代碼

相關標籤/搜索

bootstrap+bootstrap+scss

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。