BooStrap4文檔摘錄 2 Content
Content
Reboot:從新寫了主要元素的排列。
本章講了各種元素及其相關的類。
?? 文檔左上角有搜索欄。
Components
- Alert?
- Badge?
- Button?和Button group??概覽
- Card?
- Carousel輪播圖??概覽，
- Collapse隱藏／顯示 功能?
- Dropdowns
- Form???
- input group
- List group
- Modal: 用於增加一個彈出的對話框???
- Navs
- Navbars
- Paginaton標簽頁碼，有相應的gem
- Progress 類似在按鈕旁彈出一個對話框
- Progress 進度條。
- Tooltips,當鼠標移動到某個元素上，彈出一個小提示框。
- Scrollspy
基礎顏色：
Primary Secondary Success Danger Warning Info Light Dark
Alerts： 靈活的警告信息反饋的類
alert, alert-primary, alert-success, alert-danger, alert-warning, alert-info等。
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
alert-link
可用於<a>內 。其實就是加粗了。
Alert也可以包含其他元素，headings, paragraphs, dividers。
<h3 class="alert-heading">
<hr>,<p>
Dismissing
.alert-dismissible 讓警告信息消失
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>
</div>
.fade and .show 可以增加一個稍慢消失的效果
JavaScript behavior
(具體見https://getbootstrap.com/docs/4.1/components/alerts/)
$(‘.alert‘) .alert("close")
關閉alert會從DOM中移除它。
Badges 徽章 .badge-*
<h1>Example heading <span class="badge badge-success">New</span></h1>
產生一個標簽 Primary Secondary Success
.badge-pill:Primary Secondary Success 標簽是藥丸狀的。
在<a>使用就是一個帶框的連接Primary Secondary
Button
可以在<a> <button>, <input>中使用。
<button type="button" class="btn">Basic</button><button type="button" class="btn btn-primary">Primary</button>
（按鈕用到了::hover選擇器。）
btn-outline-*
btn-lg, btn-sm, 以及不加這個類，是三種大小。
btn-block 創建一個塊級的按鈕，獨占一行，和父級元素的寬度一樣。
disabled/active
按鈕是否能用，如果是disabled，則顏色發淡，讓按鈕處於不可用的狀態。
如果是active，讓按鈕保持點擊下去的狀態。都是用到了event.
<button type="button" class="btn btn-primary active">Active Primary</button>??按鈕有disabled這個屬性！
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>連接標簽，只能使用.disabled類
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Button Group
一組按鈕在一行，通過使用Javascript讓它們的功能更強大。
包裹一組按鈕用.btn在 .btn-group 中。
<div class="btn-group"><button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
應用輔助技術如screen readers需要使用role="group", aria-label="ddd"
功能挺強大的，可以橫可以豎，可以加dropdown，具體用的時候再看把。
https://www.w3schools.com/bootstrap4/bootstrap_button_groups.asp
https://getbootstrap.com/docs/4.1/components/button-group/
Card 卡片
一個靈活的可以擴展的內容容器。可以包含headers, footers，一個寬的內容，裏面可以加選擇欄，按鈕，圖片。取代了bootstrap3中的panel, thumbnails。
根據需要，看文檔案例來添加想要的類型。
https://getbootstrap.com/docs/4.1/components/card/
Carousel 輪播圖
一個滑動的顯示效果，可以循環播放圖片。用到了css3D和一點JavaScript 。
有不同的輪播效果，具體看文檔：
https://getbootstrap.com/docs/4.1/components/carousel/
Collapse 功能 （點擊查看文檔）
一個JS 插件用於顯示和隱藏content。Button, anchors可以用於觸發鍵。
原理是height：0
- .collapse: 隱藏
- .collapsing 用於過度transitions
- .collapse.show 顯示
button的話, data-target="#某個元素"
使用rails 的幫助方法的話，需要href, data-target設置清楚，同時加上data-toggle="collapse"
隱藏的<div class="collapse show" id="某個元素">
?? show的作用是默認是顯示狀態。
Multiple targets
一行的多列元素，每列都有唯一的id，和共同的類，通過類和id,選擇性顯示需要的列。
和card一起使用， Accordion
需要用到：data-parent屬性
給父<div> 一個??，每一個子<div class="card">包含<div class="card-header">和<div id=‘‘本身" class="collpase" data-parent="#父??">
Accessibility
請註意，對於control element, 需要加上aria-expanded
如果隱藏的元素默認是隱藏狀態，需要在控制元素上加上aria-expanded="false"
如果控制元素是鏈接<a>,需要加上role="button"
如打開的是單一元素，用data-target="某個元素的??",aria-controls="某個元素的??"
如打開的是多個元素，用data-target="這些元素的class", aria-controls="?? ?? ??"
輔助技術 ：
Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.利用這2個屬性直接導航到隱藏的元素。
BooStrap4文檔摘錄 2 Content