标签：carousel line rip readers emoji vba www variant positive
Content
Reboot:从新写了主要元素的排列。
本章讲了各种元素及其相关的类。
?? 文档左上角有搜索栏。
Components
基础颜色：
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>Success!</strong> Indicates a successful or positive action.
</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>（按钮用到了::hover选择器。）
btn-outline-*
btn-lg, btn-sm, 以及不加这个类，是三种大小。
btn-block 创建一个块级的按钮，独占一行，和父级元素的宽度一样。
disabled/active
按钮是否能用，如果是disabled，则颜色发淡，让按钮处于不可用的状态。
如果是active，让按钮保持点击下去的状态。都是用到了event.
??按钮有disabled这个属性！
连接标签，只能使用.disabled类
Button Group
一组按钮在一行，通过使用Javascript让它们的功能更强大。
包裹一组按钮用.btn在 .btn-group 中。
<div class="btn-group">
应用辅助技术如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
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个属性直接导航到隐藏的元素。
标签：carousel line rip readers emoji vba www variant positive
原文地址：https://www.cnblogs.com/chentianwei/p/9210998.html
