首页 > 代码库 > bootstrap 组件
bootstrap 组件
bootstrap 组件
1下拉菜单（dropdown）
下拉菜单切换（dropdown-toggle）
下拉菜单对齐（dropdown-menu-right-右对齐）
下拉菜单分割线（divider）
禁用菜单（disabled）
2按钮组（btn-group）
按钮组尺寸（btn-group-lg，btn-group-sm，btn-group-xs）
嵌套：只须把 .btn-group 放入另一个 .btn-group 中
eg:<div class="btn-group">
<div class="btn-group">
</div>
</div>
垂直排列（btn-group-vertical）
3按钮式下拉菜单：把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
单按钮下拉菜单
eg;<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="http://www.mamicode.com/#">Action</a></li>
<li><a href="http://www.mamicode.com/#">Another action</a></li>
<li><a href="http://www.mamicode.com/#">Something else here</a></li>
<li class="divider"></li>
<li><a href="http://www.mamicode.com/#">Separated link</a></li>
</ul>
</div>
分列式按钮下拉菜单
eg:<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="http://www.mamicode.com/#">Action</a></li>
<li><a href="http://www.mamicode.com/#">Another action</a></li>
<li><a href="http://www.mamicode.com/#">Something else here</a></li>
<li class="divider"></li>
<li><a href="http://www.mamicode.com/#">Separated link</a></li>
</ul>
</div>
按钮尺寸
（btn-group-lg，btn-group-sm，btn-group-xs）
4 向上弹出式菜单（dropup）
5 输入框组(input-group):通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展
eg:<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
也可在span的类里加字体图标
6导航（nav）
标签页：注意 .nav-tabs 类赖.nav 基类
eg:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="http://www.mamicode.com/#">Home</a></li>
<li role="presentation"><a href="http://www.mamicode.com/#">Profile</a></li>
<li role="presentation"><a href="http://www.mamicode.com/#">Messages</a></li>
</ul>
胶囊式标签页
HTML 标记相同，但使用 .nav-pills 类：
胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。
7 导航条
为了增强可访问性，务必给每个导航条加上 role="navigation" 属性。
eg:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.mamicode.com/#">
<img alt="Brand" src="http://www.mamicode.com/...">可以放图片 标签
</a>
</div>
</div>
</nav>
表单
将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐，并 在较窄的视口（viewport）中呈现折叠状态。 使用对齐选项可以 规定其在导航条上出现的位置。
按钮
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
文本
把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通 常使用 <p> 标签。
固定在顶部
添加 （.navbar-fixed-top） 类可以让导航条固定在顶部，还可包含 一个 .container 或 .container-fluid 容器，从而让导航条居 中，并在两侧添加内部（padding）。
固定在底部
添加 .navbar-fixed-bottom
静止在顶部
通过添加 .navbar-static-top 类即可创建一个与页面等宽度的 导航条，它会随着页面向下滚动而消失
8分页（pagination）
翻页（pager）链接居中对齐
两端对齐(class="previous",class="next"）
eg;
<ul class="pager">
<li class="previous"><a href="http://www.mamicode.com/#">← Older</a></li>
<li class="next"><a href="http://www.mamicode.com/#">Newer →</a></li>
</ul>
9徽章
给链接、导航等元素嵌套 <span class="badge"> 元素，可以很 醒目的展示新的或未读的信息条目。
10关闭的警告框
为警告框添加一个可选的 .alert-dismissible 类和一个关闭按 钮。
11 进度条（progress）
动画效果
为 .progress-bar-striped 添加 .active 类，使其呈现出由右 向左运动的动画效果。
12 媒体对象(media)
这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片
13列表组（list-group）给列表组加入徽章组件，它会自动被放在右边。
eg:<ul class="list-group">
<li class="list-group-item">Vestibulum at eros</li>
.
.
.
</ul>
14面板（panel）
标题的面版(.panel-heading)
带脚注的面版
把按钮或次要的文本放入 .panel-footer 容器内。注意面版的 脚注不会从情境效果中继承颜色，因为他们并不是主要内容。
带表格的面版
为面板中不需要边框的表格添加 .table 类，是整个面板看上去更 像是一个整体设计。如果是带有 .panel-body 的面板，我们为表 格的上方添加一个边框，看上去有分隔效果。
bootstrap 组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。