bootstrap20180619-常见组件

3常见组件.html

3.1 下拉菜单

3.2 按钮组
单一按钮组
<div class="btn-group">

</div>

多维
<div class="btn-toolbar" style="margin: 0;">
<div class="btn-group">
<button class="btn">1</button>

</div>
<div class="btn-group">
<button class="btn">5</button>

</div>

</div>

垂直按钮组
<div class="btn-group btn-group-vertical">

3.3 按钮下拉菜单
不同颜色
按钮式下拉菜单可以和所有表示尺寸的类共存:.btn-large、.btn-small、.btn-mini。

3.4 向上弹菜单项
给.dropdown-menu的直接父节点添加一个类就可以让下拉菜单由下到上显示。.caret将会自动翻转

3.5 tab项 导航栏
基于<ul>并添加.nav-tabs类:
相同的HTML结构,但这里使用了.nav-pills类:
为任一导航组件(标签页、pills或列表)添加.disabled类,均可让链接变灰并失去鼠标悬停效果

为了让标签页可切换,需要在.tab-content中创建一个带有唯一ID的.tab-pane。

tabs-left 左侧 右侧 待实现

3.6 导航条

顶部或底部 悬停

通过添加.navbar-inverse类可改变导航条的外观。

3.7 面包屑

3.8 分页

可根据不同情况定制链接。用.disabled标明链接不可点击,用.active标明当前页。
加.pagination-large、.pagination-small 或 .pagination-mini就可以改变分页尺寸。

3.9 标签与徽章
有用

3.10
<h1> <small> 字体

警告框 没实现~~~~ 有意思

3.11 进度条

熟悉常见,后续可以定制化开发
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值