The web develope bootcamp bootstrap flex

發表於 | 分類於

了解 bootstrap flex 設定

d-flex

在 d-flex 的預設狀況下，包還在其中的物件，都是由左至右、由上至下看，也就是說使用 justify-content 的 start 是在右邊、 end 是中間、 end 是左邊，align-items的 start 是上方、 center 是中間、 end 是底部。

需要在不同大小的視窗模式下可以在d-{breakpoint}-flex，就可以在特定視窗大小下改變呈現方式。

justify-content、align-items 的 value 中， between 為左右不留 margin 只算物件間隔平均分配 & around 則是計算每個物件左右兩邊再均分。

<!-- default buttons will stretch top to bottom -->
<div class="container d-flex">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>
<!-- botton normal -->
<div class="container d-flex justify-content-start align-items-start">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>
<!-- button middle(justify-content) center(align-content) -->
<div class="container d-flex justify-content-center align-items-center">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>
<!-- button right bottom -->
<div class="container d-flex justify-content-end align-items-end">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>

如果是使用 flex-row-reverse 的時候，row 的部分會相反的看也就是，右邊到左邊，而上至下還是正常的。

<!-- botton right and top-->
<div class="container d-flex flex-row-reverse justify-content-start align-items-start">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>
<!-- button middle(justify-cright) center(align-content) -->
<div class="container d-flex flex-row-reverse justify-content-center align-items-center">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>
<!-- button left and bottom -->
<div class="container d-flex flex-row-reverse justify-content-end align-items-end">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>

如果是使用 flex-column 會發生甚麼事情呢? row 、 column 對調， row 變成看垂直的 justify-content 的 start 是在上方、 end 是中間、 end 是底部，column變成看水平的，align-items的 start 是左邊、 center 是中間、 end 是右邊。物件的排列方式也是從上排到下，而不是左排列到右。

<!-- botton top(justify-cright) and right(align-items)-->
<div class="container d-flex flex-column justify-content-start align-items-start">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>
<!-- button middle(justify-cright) center(align-content) -->
<div class="container d-flex flex-column justify-content-center align-items-center">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>
<!-- button bottom(justify-cright) left(justify-cright) -->
<div class="container d-flex flex-column justify-content-end align-items-end">
  <button class="btn btn-primary">
  <button class="btn btn-secondary">
  <button class="btn btn-info">
</div>

在 bootstrap 4 中的 .nav 與預設了 d-flex row 所以帶有 flexbox，設定上可以與上面所筆記的相同。

而要設定樣式可以:

  • nav-tabs: 形成書籤樣式
  • nav-pills: 格子樣式，nav-fill、 nav-justified 都會填滿格子，只是 justified 的每個連結大小都會相同， fill 則是按照內容長度。
    設置 nav-tabs 的時候，點擊其他連結式不會有動作的，需要配合 JS 產生動態效果， 所以要帶入 `role="tablist"`, `role="tab"`, `role="tabpanel"`，最外層使用 div 帶有 role="tablist"，連結選項則帶有 role="tab"，需要顯示的內容則帶有 role="tabpanel"，並透過 `aria-` 屬性作為 DOM 操作指向標籤。

官方範例:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

aria-labelledby 指向 li 的 id。 active表示被選擇到的樣式變化，而被選擇到的時候 aria-selected 會從 false 變成 true。

aria 簡略介紹