bootstrap4經常使用樣式整理

背景

最近在作一些小的學習項目時，屢次用到了bootstrap4，因此在這裏將bootstrap進行整理，用來之後查看。

bootstrap4安裝

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

容器和網格系統

• container container-fluid //容器類前者固定寬度後者100%寬度

文字排版

• display //標題類 1-4
• small //小文本
• <abbr> //文本底部下面一條虛線邊框

顏色

• text-muted 柔和
• text-primary 重要
• text-success 成功
• text-info 提示
• text-warning 警告
• text-danger 危險
• text-secondary 副標題
• text-dark 深灰色文字
• text-light 淺灰色
• text-white 白色

表格

• table //默認樣式
• table-striped //條紋表格
• table-bordered //邊框表格
• table-hover //鼠標懸停
• table-dark //黑色背景表格
• table-responsive //響應式表格

圖片

• rounded //圓角效果
• rounded-circle //橢圓效果
• img-thumbnail //圖片縮略圖效果
• img-fluid //圖片響應式效果

超大屏幕

• jumbotron // 屏幕
• jumbotron-fluid //沒有圓角的全屏幕

信息提示框

• alert-success //成功提示信息
• alert-dismissable class="close" data-dismiss="alert" //關閉提示框

按鈕

• btn-primary //主要按鈕
• btn-secondary //次要按鈕
• btn-success //成功按鈕
• btn-info //信息按鈕
• btn-danger //危險
• btn-outline-primary //按鈕邊框
• btn-sm btn-lg //小大號按鈕
• btn-block //塊級按鈕
• active //可用
• disabled //禁用

按鈕組

• btn-group //按鈕組
• btn-group-lg|sm|xs 控制按鈕組大小
• btn-group-vertical 垂直按鈕組

進度條

• progress //添加一個div
• progress-bar //在上面的div中添加一個progress-bar的div

分頁

• pagination //ul元素上添加
• page-item //在li元素上添加page-item

列表組

• list-group //列表組
• list-group-item //列表li
• list-group-item-action

卡片

• card、card-header、card-body、card-footer
• card-img-top //圖片
• card-body、card-title、card-text //圖片卡片
• card-img-overlay//設置圖片爲背景

下拉菜單

• dropdown //下拉菜單默認
• button設置dropdown-toggle data-toggle=「dropdown」 //下拉button
• dropdown-menu //下拉菜單
• a設置樣式dropdown-item

導航欄

• navbar、navbar-expand-sm、bg-light
• ul：navbar-nav li：nav-item

表單

• form-group
• label for email
• input class form-control

模態框

button設置 data-toggle="modal" data-target="#myModal"
<div class="modal fade" id="myModal"></div>
<div class="modal-dialog"></div>
<div class="modal-content"></div>
 <div class="modal-header">
        <h4 class="modal-title">模態框頭部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
<div class="modal-body">模態框內容..</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">關閉</button></div>

提示框

• data-toggle="tooltip" //建立提示框
• title="我是提示內容!" //提示內容
• data-placement="top" //指定提示框位置

$(document).ready(function(){ //初始化

$('[data-toggle="tooltip"]').tooltip();

});