Bootstrap4 卡片
<div class="card"> <div class="card-body">卡片</div> </div>
卡片頭部，內容，底部
<div class="card"> <div class="card-header">卡片頭部</div> <div class="card-body">卡片內容</div> <div class="card-footer">卡片底部</div> </div>
多種顏色的卡片，背景bg-，文字顏色text-
<div class="card bg-primary text-white"> <div class="card-header">卡片頭部</div> <div class="card-body">卡片內容</div> <div class="card-footer">卡片底部</div> </div>
卡片的標題、文本和鏈接 card-title card-text card-link
<div class="card"> <div class="card-body"> <h4 class="card-title">卡片標題</h4> <p class="card-text">卡片文字部分</p> <a href="#" class="card-link">卡片鏈接</a> </div> </div>
圖片卡片 card-img-top card-img-bottom card-img-overlay
<div class="card" style="width:200px;"> <div class="card-body"> <img src="img/img_avatar.png" class="card-img-top"> <h4 class="card-title">卡片標題</h4> <p class="card-text">卡片文字部分</p> <a href="#" class="card-link">卡片鏈接</a> <img src="img/img_avatar.png" class="card-img-bottom"> </div> </div>
<div class="card" style="width:200px;"> <div class="card-body"> <img src="img/img_avatar.png" class="card-img-top"> <div class="card-img-overlay"> <h4 class="card-title">卡片標題</h4> <p class="card-text">卡片文字部分</p> <a href="#" class="card-link">卡片鏈接</a> </div> </div> </div>
Bootstrap4 下拉選單
Bootstrap4 下拉選單依賴于 popper.min.js，
下拉選單是可切換的，是以串列格式顯示鏈接的背景關系選單，
<div class="dropdown"> <button class="btn btn-primary dorpdown-toggle" data-toggle="dropdown">button</button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item1</a> <a href="#" class="dropdown-item">item2</a> <a href="#" class="dropdown-item">item3</a> </div> </div>
也可以給a鏈接添加下拉效果
<div class="dropdown"> <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown link </a> <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div>
下拉選單中的分割線
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another link</a> </div> </div>
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <h4 class="dropdown-header">dropdown-header</h4> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another link</a> </div> </div>
下拉選單的激活項和禁用項
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <h4 class="dropdown-header">dropdown-header</h4> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item active" href="#">Link 2</a> <a class="dropdown-item disabled" href="#">Link 3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another link</a> </div> </div>
下拉選單右對齊 dropdown-menu-right
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu dropdown-menu-right"> <h4 class="dropdown-header">dropdown-header</h4> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item active" href="#">Link 2</a> <a class="dropdown-item disabled" href="#">Link 3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Another link</a> </div> </div>
改變下拉選單彈出方向
<!-- 向右彈出 --> <div class="dropdown dropright"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item active" href="#">Link 2</a> </div> </div>
<div class="container"> <br><br><br><br><br><br><br> <!-- 向上彈出 --> <div class="btn-group dropup"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item active" href="#">Link 2</a> </div> </div> </div>
我為啥加了這么多換行符呢，因為不加它還是會向下彈出
<div class="container" style="text-align:center;"> <!-- 向左彈出 --> <div class="btn-group dropleft"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item active" href="#">Link 2</a> </div> </div> </div>
必須在左邊留有空間才能生效
在按鈕中添加下拉選單
<div class="btn-group"> <button class="btn btn-primary">button</button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">toggle</button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> </div> </div>
Bootstrap4 折疊
<button data-toggle="collapse" data-target="#demo" type="button" class="btn btn-primary">折疊</button> <div id="demo" class="collapse"> 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. </div>
<a> 元素上你可以使用 href 屬性來代替 data-target 屬性:
<a href="#demo" data-toggle="collapse" >折疊</a> <div id="demo" class="collapse"> 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. </div>
默認是隱藏的，也可以改為默認顯示
<a href="#demo" data-toggle="collapse" >折疊</a> <div id="demo" class="collapse show"> 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. </div>
簡單的手風琴效果
<div id="accordion"> <div class="card"> <div class="card-header"> <a href="#one" class="card-link" data-toggle="collapse">item1</a> </div> <div id="one" class="collapse"> <div class="card-body"> 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. </div> </div> </div> <div class="card"> <div class="card-header"> <a href="#two" class="card-link" data-toggle="collapse">item2</a> </div> <div id="two" class="collapse"> <div class="card-body"> 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. </div> </div> </div> <div class="card"> <div class="card-header"> <a href="#three" class="card-link" data-toggle="collapse">item3</a> </div> <div id="three" class="collapse"> <div class="card-body"> 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. </div> </div> </div> </div>
Bootstrap4 導航
簡單水平導航
<ul class="nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul>
設定導航居中或者靠右
<ul class="nav justify-content-center"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul> <ul class="nav justify-content-end"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul>
垂直導航
<ul class="nav flex-column"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul>
tab選項卡導航
<ul class="nav nav-tabs"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link active">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul>
膠囊導航
<ul class="nav nav-pills"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link active">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul>
導航等寬
<ul class="nav nav-justified"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link active">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul>
動態tab選項卡
<ul class="nav nav-tabs"> <li class="nav-item"> <a href="#one" class="nav-link active" data-toggle="tab">item1</a> </li> <li class="nav-item"> <a href="#two" class="nav-link" data-toggle="tab">item2</a> </li> <li class="nav-item"> <a href="#three" class="nav-link" data-toggle="tab">item3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane container active" id="one"> <h3>one</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane container" id="two"> <h3>two</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane container" id="three"> <h3>three</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
膠囊狀態tab選項卡
<ul class="nav nav-pills"> <li class="nav-item"> <a href="#one" class="nav-link active" data-toggle="pill">item1</a> </li> <li class="nav-item"> <a href="#two" class="nav-link" data-toggle="pill">item2</a> </li> <li class="nav-item"> <a href="#three" class="nav-link" data-toggle="pill">item3</a> </li> </ul> <div class="tab-content"> <div class="tab-pane container active" id="one"> <h3>one</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane container" id="two"> <h3>two</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div class="tab-pane container" id="three"> <h3>three</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>
Bootstrap4 導航欄
小屏時垂直顯示，其余螢屏水平顯示
<nav class="navbar navbar-expand-sm"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul> </nav>
默認就是垂直導航欄
<nav class="navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item3</a> </li> </ul> </nav>
不同顏色的導航欄
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav> <nav class="navbar bg-warning navbar-expand-sm navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav> <nav class="navbar bg-success navbar-expand-sm navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav> <nav class="navbar bg-danger navbar-expand-sm navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav> <nav class="navbar bg-dark navbar-expand-sm navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav>
高亮顯示品牌/Logo
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand">logo</a> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav> <nav class="navbar bg-warning navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand">logo</a> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav>
圖片logo
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav> <nav class="navbar bg-warning navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand"><img src="img/boot.jpg" style="width:100px;"></a> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </nav>
折疊導航欄
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mytoggle"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#" class="nav-link">item2</a> </li> </ul> </div> </nav>
導航欄上可以設定下拉選單
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mytoggle"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> </div> </li> </ul> </div> </nav>
導航欄的表單與按鈕
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mytoggle"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> </div> </li> </ul> <form action="" class="form-inline"> <input type="text" class="form-control" placeholder="請輸入產品型號"> <button type="submit" class="btn btn-warning">搜索</button> </form> </div> </nav>
.input-group-addon 類用于在輸入框前添加小標簽
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mytoggle"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> </div> </li> </ul> <form action="" class="form-inline"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="請輸入郵箱賬號"> <button type="submit" class="btn btn-warning">發送</button> </form> </div> </nav>
導航欄文本（非鏈接）
<nav class="navbar bg-info navbar-expand-sm navbar-light"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mytoggle"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> </div> </li> </ul> <span class="navbar-text">普通文本</span> </div> </nav>
固定導航
<nav class="navbar bg-info navbar-expand-sm navbar-light fixed-top"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mytoggle"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> </div> </li> </ul> <span class="navbar-text">普通文本</span> </div> </nav>
<nav class="navbar bg-info navbar-expand-sm navbar-light fixed-bottom"> <a href="#" class="navbar-brand"><img src="img/hg.png" style="width:30px;"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mytoggle"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="mytoggle"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link">item1</a> </li> <li class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">item2</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> <a href="#" class="dropdown-item">item</a> </div> </li> </ul> <span class="navbar-text">普通文本</span> </div> </nav>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45524.html
標籤：Html/Css