Bootstrap基础 组件, 总结02
BootStrap 框架
官网 www.bootcss.com
主要用于移动端响应式布局
(本文纯属个人根据官方文档总结,对于bootstrap也是初学,如出现问题请不吝提出,共同学习)
学习内容:
bootstrap 全局CSS(总结01中)
bootstrap CSS组件(总结02中)
bootstrap javascript插件(总结03中)
Glyphicons 字体图标
应该创建一个嵌套的<span>标签,并将图标类应用到这个 <span>标签上。
图标类只能应用在不包含任何文本内容或子元素的元素上(span标签内必须没有内容),
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
字体图标的class属性名空格不可省略,aria-hidden="true"是为了对屏幕阅读器隐藏,
因为本身字体图标没有真正意义,不需要被屏幕阅读器抓取
下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
1.整个下拉菜单包裹在.dropdown容器中
2.按钮需要添加dropdown-toggle的class属性值,需要data-toggle属性(让程序知道整个按钮是干嘛用的)
还需要aria-haspopup,aria-expanded两个属性(一个表示出现菜单,一个表示展开状态)
给按钮绑定一个ID使之后的菜单值可以联系上
3.可以在按钮中添加字体图标
4.布局菜单选项,使用ul,需要添加dropdown-menu的class属性值,
还需告诉浏览器目标事件aria-labelledby=“dropdownMenu1”
当ul获取到焦点时,屏幕阅读器是会读:“Dropdown”
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
data-toggle指以什么事件触发,常用的如modal,popover,tooltips,dropdown等,
(其实就是转换属性,代码中将botton以下拉菜单形式展示)
data-target指事件的目标
aria-haspopup :true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。
其它可选值:true表示元素是展开的;false表示元素不是展开的。
对齐
默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
标题(当添加标题时候li中不要包含a标签)
li中添加dropdown-header的class属性用于提示
<li class="dropdown-header">Dropdown header</li>
分割线(当添加分割线时候li中不要包含a标签)
li中添加divider的class属性值 以及role=“separator” separator(翻译:分离器)
禁用的菜单项
为下拉菜单中的 <li> 元素添加 .disabled 类,从而禁用相应的菜单项。
按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为
即把单个按钮放入 .btn-group的容器中
尺寸
只要给 .btn-group 加上 .btn-group-* 类,(.btn-group-lg ; .btn-group-sm ; .btn-group-xs)就省去为按钮组中的每个按钮都赋予尺寸类了,如果包含了多个按钮组时也适用。单个按钮尺寸用 .btn-lg等
嵌套
想要把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。
垂直排列
让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
添加 class=“btn-group-vertical”
两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸,填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。
a元素的按钮直接包到 btn-group-justified中即可
button按钮需要每个按钮包裹到.btn-group中然后在包到btn-group-justified中
分裂式按钮下拉菜单
相似地,分裂式按钮下拉菜单也需要同样的改变一些标记,但只是多一个分开的按钮。
其实就是多了一个button按钮 ,注意最好在字体图标后面再加一个span标签,
给予sr-only的class属性值,用于优化
输入框组
通过在文本输入框 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予
.input-group-addon 或 .input-group-btn 类,可以给 .form-control 的前面或后面添加额外的元素。
addon翻译:插件
<label for="...">...</label>
<div class="input-group">
<span class="input-group-addon">
<input class="checkbox" aria-label="..."></input>
</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">
<button class="btn btn-default" type="button">go!</button>
</span>
</div>
span标签中可以放button,input 。使其成为按钮,选择框类型的额外元素
导航
Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。
<ul class="nav nav-tabs" id="myTab">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
将 nav-tabs改为 nav-pills可以将导航改为胶囊式
导航切换依赖Jquery 可写js代码实现
<script>
$(function() {
$("#myTab li").click(function(e) {
e.preventDefault()
$(this).tab('show')
window.location.href = '#' + $(this).children('a').attr('href')
})
})
</script>
目前个人能想到的解决切换后链接失效的代码写法,方法不是很好,有好的方式可以留言。
两端对齐 加class属性值 nav-justified
分页
为您的网站或应用提供带有展示页码的分页组件,或者可以使用简单的翻页组件。
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
尺寸
想要更小或更大的分页?.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。
对齐链接
你还可以把链接向两端对齐:(ul的class属性pager)
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
徽章
给链接、导航等元素嵌套 <span class=“badge”> 元素,可以很醒目的展示新的或未读的信息条目。
巨幕(给class一个jumbotron属性值)
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
页头给class一个page-header属性值)
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
组件部分后面个别内容使用可能用到jquery,建议查看官方文档
https://v3.bootcss.com/components/#alerts