Bootstrap 滾動監聽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> body{ margin:10px; padding:10px; } .navbar-item{flex:1;} </style> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50" style="position: relative;"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> <ul class="navbar-nav" style="width:100%;"> <li class="nav-item"> <a href="#item1" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#item2" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#item3" class="nav-link">item3</a> </li> <li class="nav-item"> <a href="#item4" class="nav-link">item4</a> </li> </ul> </nav> <div id="item1" class="container-fluid bg-success" style="padding:70px 0"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item2" class="container-fluid bg-warning" style="padding:70px 0"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item3" class="container-fluid bg-danger" style="padding:70px 0"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item4" class="container-fluid bg-info" style="padding:70px 0"> <h1>Section 4</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </body> </html>
把滾動監聽加在body標簽上，是正常的
當我嘗試加在某個div上時，發現滾動監聽似乎無效了
各位有知道原因的么
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> body{ margin:10px; padding:10px; } .navbar-item{flex:1;} </style> </head> <body> <div data-spy="scroll" data-target=".navbar" data-offset="50" style="width:300px;margin:0 auto;position: relative;"> <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top" style="width:300px;margin:0 auto;"> <ul class="navbar-nav" style="width:100%;"> <li class="nav-item"> <a href="#item1" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#item2" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#item3" class="nav-link">item3</a> </li> <li class="nav-item"> <a href="#item4" class="nav-link">item4</a> </li> </ul> </nav> <div id="item1" class="container-fluid bg-success" style="padding:70px 0"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item2" class="container-fluid bg-warning" style="padding:70px 0"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item3" class="container-fluid bg-danger" style="padding:70px 0"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item4" class="container-fluid bg-info" style="padding:70px 0"> <h1>Section 4</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </div> </body> </html>
垂直滾動監聽：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .nav-pills{ position:fixed; top:20px; } .col-8 div{ height:800px; } </style> </head> <body data-spy="scroll" data-target="#navbar" data-offset="1" style="position: relative;"> <div class="container-fluid"> <div class="row"> <nav class="col-4" id="navbar"> <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a href="#item1" class="nav-link">item1</a> </li> <li class="nav-item"> <a href="#item2" class="nav-link">item2</a> </li> <li class="nav-item"> <a href="#item3" class="nav-link">item3</a> </li> <li class="nav-item"> <a href="#item4" class="nav-link">item4</a> </li> </ul> </nav> <div class="col-8"> <div id="item1" class="container-fluid bg-success" style="padding:70px 0"> <h1>Section 1</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item2" class="container-fluid bg-warning" style="padding:70px 0"> <h1>Section 2</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item3" class="container-fluid bg-danger" style="padding:70px 0"> <h1>Section 3</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> <div id="item4" class="container-fluid bg-info" style="padding:70px 0"> <h1>Section 4</h1> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p> </div> </div> </div> </div> </body> </html>
Bootstrap4 小工具
使用 border 類可以添加或移除邊框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ display: inline-block; width:100px; height:100px; margin:20px; } </style> </head> <body> <div class="border"></div> <div class="border-0"></div> <div class="border border-top-0"></div> <div class="border border-right-0"></div> <div class="border border-bottom-0"></div> <div class="border border-left-0"></div> </body> </html>
Bootstrap4 提供了一些類來設定邊框顏色:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ display: inline-block; width:100px; height:100px; margin:20px; } </style> </head> <body> <div class="border border-primary">primary</div> <div class="border border-secondary">secondary</div> <div class="border border-info">info</div> <div class="border border-warning">warning</div> <div class="border border-danger">danger</div> <div class="border border-success">success</div> <div class="border border-light">light</div> <div class="border border-dark">dark</div> <div class="border border-white">white</div> </body> </html>
使用rounded 類可以添加圓角邊框:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ display: inline-block; width:100px; height:100px; margin:20px; } </style> </head> <body> <div class="rounded border">rounded</div> <div class="rounded-top border">rounded-top</div> <div class="rounded-bottom border">rounded-bottom</div> <div class="rounded-left border">rounded-left</div> <div class="rounded-right border">rounded-right</div> <div class="rounded-circle border">rounded-circle</div> <div class="rouded-0 border">rouded-0</div> </body> </html>
.float-right 類用于設定元素右浮動， .float-left 設定元素左浮動, .clearfix 類用于清除浮動:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ width:100px; height:100px; } </style> </head> <body> <div class="clearfix"> <div class="box border float-left">float-left</div> <div class="box border float-right">float-right</div> </div> </body> </html>
設定浮動 (.float-*-left|right - * 為 sm, md, lg 或 xl)的方向依賴于螢屏的大小:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .box{ width:100px; height:100px; } </style> </head> <body> <!-- 設定回應式浮動 --> <div class="clearfix"> <div class="box border float-md-right">在大于中等螢屏尺寸上右浮動</div> </div> </body> </html>
使用 .mx-auto 類來設定居中對齊:
<div class="box mx-auto bg-warning">div</div>
使用 w-* 類 (.w-25, .w-50, .w-75, .w-100, .mw-100) 來設定寬度:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> div{ margin-bottom:10px; } </style> </head> <body> <div class="w-25 bg-warning">25%</div> <div class="w-50 bg-warning">50%</div> <div class="w-100 bg-warning">100%</div> <div class="mw-80 bg-warning">最大80%</div> </body> </html>
最大寬度沒生效，是這么用的么？？
使用 h-* 類 (.h-25, .h-50, .h-75, .h-100, .mh-100) 來設定高度:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .container{ height:300px; } div{ margin-right:10px; } </style> </head> <body> <div class="container"> <div class="float-left h-25 bg-warning">25%</div> <div class="float-left h-50 bg-warning">50%</div> <div class="float-left h-100 bg-warning">100%</div> <div class="float-left mh-80 bg-warning" style="height:300px;">最大80%</div> </div> </body> </html>
不是很懂這個最大寬度和最大高度的原理……
Bootstrap 4 Flex（彈性）布局
注意：IE9 及其以下版本不支持彈性盒子，所以如果你需要兼容 IE8-9，請使用 Bootstrap 3
<div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">bg-warning</div> <div class="p-2 bg-info">bg-info</div> <div class="p-2 bg-danger">bg-danger</div> </div>
創建顯示在同一行上的彈性盒子容器可以使用 d-inline-flex 類:
<div class="d-inline-flex p-3 bg-dark"> <div class="p-2 bg-warning">bg-warning</div> <div class="p-2 bg-info">bg-info</div> <div class="p-2 bg-danger">bg-danger</div> </div>
.flex-row 可以設定彈性子元素水平顯示，這是默認的，
使用 .flex-row-reverse 類用于設定右對齊顯示，即與 .flex-row 方向相反，
<div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark flex-row"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark flex-row-reverse"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div>
.flex-column 類用于設定彈性子元素垂直方向顯示, .flex-column-reverse 用于翻轉子元素：
<div class="d-flex p-3 bg-dark flex-column"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark flex-column-reverse"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div>
.justify-content-* 類用于修改彈性子元素的排列方式，* 號允許的值有：start (默認), end, center, between 或 around:
<div class="d-flex p-3 bg-dark justify-content-start"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-end"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-center"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-between"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark justify-content-around"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box1</div> <div class="p-2 bg-danger">flex box3</div> </div>
.flex-fill 類強制設定各個彈性子元素的寬度是一樣的:（填滿剩余空間）
<div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning flex-fill">flex box1</div> <div class="p-2 bg-info flex-fill">flex box2</div> <div class="p-2 bg-danger flex-fill">flex box3</div> </div>
.flex-grow-1 用于設定子元素使用剩下的空間，以下實體中兩個子元素只設定了它們所需要的空間，中間一個獲取剩余空間，
<div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info flex-grow-1">flex box2</div> <div class="p-2 bg-danger">flex box3</div> </div>
使用 .flex-shrink-1 用于設定子元素的收縮規則，
.order 類可以設定彈性子元素的排序，從 .order-1 到 .order-12，數字越低權重越高( .order-1 排在 .order-2 之前) :
<div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning order-2">flex box1</div> <div class="p-2 bg-info order-3">flex box2</div> <div class="p-2 bg-danger order-1">flex box3</div> </div>
.mr-auto 類可以設定子元素右外邊距為 auto，即 margin-right: auto!important;，.ml-auto 類可以設定子元素左外邊距為 auto，即 margin-left: auto!important;:
<div class="d-flex p-3 bg-dark"> <div class="p-2 mr-auto bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> </div> <div class="d-flex p-3 bg-dark"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 ml-auto bg-danger">flex box3</div> </div>
彈性容器中包裹子元素可以使用以下三個類： .flex-nowrap (默認), .flex-wrap 或 .flex-wrap-reverse，設定 flex 容器是單行或者多行
<div class="d-flex p-3 bg-dark flex-wrap"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap-reverse"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-nowrap"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div>
使用 .align-content-* 來控制在垂直方向上如何去堆疊子元素，包含的值有：.align-content-start (默認), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch，
這些類在只有一行的彈性子元素中是無效的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .d-flex{height:200px;} </style> </head> <body> <div class="d-flex p-3 bg-dark flex-wrap align-content-start border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-end border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-center border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-around border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark flex-wrap align-content-stretch border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> </body> </html>
如果要設定單行的子元素對齊可以使用 .align-items-* 類來控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默認)，
<div class="d-flex p-3 bg-dark align-items-start border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-end border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-center border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-around border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark align-items-stretch border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div>
如果要設定指定子元素對齊對齊可以使用 .align-self-* 類來控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默認)，
<div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-self-start">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-self-end">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-self-center">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-self-around">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div> <div class="d-flex p-3 bg-dark border border-white"> <div class="p-2 bg-warning">flex box1</div> <div class="p-2 bg-info">flex box2</div> <div class="p-2 bg-danger align-self-stretch">flex box3</div> <div class="p-2 bg-warning">flex box4</div> <div class="p-2 bg-info">flex box5</div> <div class="p-2 bg-danger">flex box6</div> </div>
回應式flex類：
可以根據不同的設備，設定 flex 類，從而實作頁面回應式布局，以下表格中的 * 號可以的值有：sm, md, lg 或 xl, 對應的是小型設備、中型設備，大型設備，超大型設備，
https://www.runoob.com/bootstrap4/bootstrap4-flex.html 菜鳥筆記最下面寫的很清楚，要用了就去翻翻
Bootstrap 4 多媒體物件
要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果:
<div class="media border p-3"> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基礎多媒體物件</h4> <p>要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果，</p> </div> </div>
多媒體物件可以多個嵌套（一個多媒體物件中包含另外一個多媒體物件）
要嵌套多媒體物件，可以把新的 .media 容器放到 .media-body 容器中:
<div class="media border p-3"> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基礎多媒體物件</h4> <p>要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果，</p> <div class="media border p-3"> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基礎多媒體物件</h4> <p>要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果，</p> </div> </div> </div> </div>
如果你想將頭像圖片顯示在右側，可以在 .media-body 容器后添加圖片:
<div class="media border p-3"> <div class="media-body"> <h4>基礎多媒體物件</h4> <p>要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果，</p> </div> <img src="img/img_avatar.png" class="mr-3 mt-3 rounded-circle" style="width:50px;"> </div>
可以使用 align-self-* 相關類來設定多媒體物件的圖片顯示位置：
（垂直方向）
<div class="media border p-3"> <img src="img/img_avatar.png" class="align-self-start mr-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基礎多媒體物件</h4> <p>要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果，</p> </div> </div> <div class="media border p-3"> <img src="img/img_avatar.png" class="align-self-end mr-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基礎多媒體物件</h4> <p>要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果，</p> </div> </div> <div class="media border p-3"> <img src="img/img_avatar.png" class="align-self-center mr-3 rounded-circle" style="width:50px;"> <div class="media-body"> <h4>基礎多媒體物件</h4> <p>要創建一個多媒體物件，可以在容器元素上添加 .media 類，然后將多媒體內容放到子容器上，子容器需要添加 .media-body 類，然后添加外邊距，內邊距等效果，</p> </div> </div>
Bootstrap4 創建一個網頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> </style> </head> <body> <div class="jumbotron text-center" style="margin-bottom:0;"> <h1>我的第一個 Bootstrap 4 頁面</h1> <p>重置瀏覽器視窗大小查看效果！</p> </div> <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#">導航</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">鏈接</a> </li> <li class="nav-item"> <a class="nav-link" href="#">鏈接</a> </li> <li class="nav-item"> <a class="nav-link" href="#">鏈接</a> </li> </ul> </div> </nav> <div class="container"> <div class="row"> <div class="col-sm-4"> about me <ul class="nav nav-pills flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">激活狀態</a> </li> <li class="nav-item"> <a class="nav-link" href="#">鏈接</a> </li> <li class="nav-item"> <a class="nav-link" href="#">鏈接</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用</a> </li> </ul> <hr class="d-sm-none"> </div> <div class="col-sm-8"> ... </div> </div> </div> <div class="jumbotron text-center" style="margin-bottom:0"> <p>footer</p> </div> </body> </html>
好丑……
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/45565.html
標籤：Html/Css
上一篇：CSS的3種使用方法
下一篇：flex兼容性寫法