Bootsrap2--组件的基本用法

Posted 2020-10-03 CJc917

常用组件

下拉菜单

基本结构

 1 <div class="dropdown">
 2   <!-- Link or button to toggle dropdown -->
 3   <ul class="dropdown-

menu" role="menu"  aria-labelledby="dLabel">
 4     <li><a tabindex="-1" href="#">Action</a></li>
 5     <li><a tabindex="-1" href="#">Another action</a></li>
 6     <li><a tabindex="-1" href="#">Something else here</a></li>
 7     <li class="divider"></li>
 8     <li><a tabindex="-1" href="#">Separated link</a></li>
 9   </ul>
10 </div>

功能类说明

• .dropdown、.dropup  下/上拉菜单组件，点击展开菜单
• .dropdown-menu  下拉菜单体，包含在.dropdown中
• .dropdown-submenu  二级菜单组件，鼠标悬停自动展开
• .pull-left、.pull-right   菜单相对于开启按钮左对齐/右对齐
• .disabled  禁用该项

 按钮组

基本结构

1 <div class="btn-

group">
2   <button class="btn">Left</button>
3   <button class="btn">Middle</button>
4   <button class="btn">Right</button>
5 </div>

功能类说明

• .btn-toolbar  多维按钮组，嵌套.btn-group使用
• .btn-group-vertical  垂直按钮组

其他

复选框和单选框形式

按钮组还可以从能上表现得像单元框（一次只能有一个按钮被选中）或复选框（可同时选中多个按钮）。详见JavaScript插件文档。

按钮组中使用下拉菜单

带有下拉菜单的按钮必须单独包裹在.btn- group中，然后才能放入.btn-toolbar中，只有这样才能正确渲染整个组件。

按钮下拉菜单

基本结构

1 <div class="btn-

group">
2   <a class="btn dropdown-

toggle" data-toggle="dropdown" href="#">
3     Action
4     <span class="caret"></span>
5   </a>
6   <ul class="dropdown-

menu">
7     <!-- dropdown menu links -->
8   </ul>
9 </div>

功能类说明

• .btn-mini、.btn-small、.btn- large  按钮尺寸

其他

分裂式按钮下拉菜单

1 <div class="btn-

group">
2   <button class="btn">Action</button>
3   <button class="btn 

dropdown-toggle" data-toggle="dropdown">
4     <span class="caret"></span>
5   </button>
6   <ul class="dropdown-

menu">
7     <!-- dropdown menu links -->
8   </ul>
9 </div>

导航

基本结构

1 <ul class="nav">
2   <li class="active">
3     <a href="#">首页</a>
4   </li>
5   <li><a href="#">...</a></li>
6   <li><a href="#">...</a></li>
7 </ul>

功能类说明

• .nav-pills  胶囊式导航
• .nav-stacked  堆叠式导航，垂直排布
• .nav-list  导航列表
• .nav-tabs  标签页式导航
• .tab-content  标签内容
• .tab-pane  与标签对应的标签体。必须为tab-pane设置唯一id。
• .tabs-left、.tabs-right、.tabs-below  改变标签显示在组件中的位置
• .disabled  禁用
• .divider  水平分割线
• .pull-left、.pull-right  左对齐/右对齐链接项

导航条

基本结构

 1 <div class="navbar">
 2   <div class="navbar-

inner">
 3     <a class="brand" href="#">Title</a>
 4     <ul class="nav">
 5       <li class="active"><a 

href="#">首页</a></li>
 6       <li><a href="#">Link</a></li>
 7       <li><a href="#">Link</a></li>
 8     </ul>
 9   </div>
10 </div>

功能类说明

• .navbar  导航条
• .navbar-fixed-top、.navbar-fixed-bottom  将导航条固定在顶部或底部
• .navbar-static-top  导航条位于页面顶部，但会随着页面 向下滚动而消失
• .nav-collapse.collapse  （这里有两个类）响应式导航条
• • .btn-navbar  导航条宽度减少时显示的按钮，用于显示导航 条因空间不够而被隐藏的项目
• .divider-vertical  垂直分割线
• .navbar-form  导航栏表单
• .navbar-search  搜索表单
• • .search-query  搜索框
• .navbar-text  突出文本，一般使用p标签

面包屑

基本结构

1 <ul class="breadcrumb">
2   <li><a href="#">首页</a> <span class="divider">/</span></li>
3   <li><a href="#">Library</a> <span class="divider">/</span></li>
4   <li class="active">Data</li>
5 </ul>

类似与导航，用于页面跳转

分页

基本结构

 1 <div class="pagination">
 2   <ul>
 3     <li><a href="#">Prev</a></li>
 4     <li><a href="#">1</a></li>
 5     <li><a href="#">2</a></li>
 6     <li><a href="#">3</a></li>
 7     <li><a href="#">4</a></li>
 8     <li><a href="#">5</a></li>
 9     <li><a href="#">Next</a></li>
10   </ul>
11 </div>

功能类说明

• .pagination-centered、.pagination-left、.pagination-right  分 页组件在容器中的位置
• .pager  翻页，仅包含“前一页”和“后一 页”按钮
• • .previous  前一页，位于容器的左侧
  • .next  后一页，位于容器右侧

 其他类型组件

 

标签与徽章

.label、.badge  标签、徽章

排版组件

Hero块

1 <div class="hero-unit">
2   <h1>Heading</h1>
3   <p>Tagline</p>
4   <p>
5     <a class="btn btn-primary btn-large">
6       Learn more
7     </a>
8   </p>
9 </div>

用于展示网页的重点内容，适合营销类或内容类网站

页面标题

1 <div class="page-header">
2   <h1>Example page header <small>Subtext for header</small></h1>
3 </div>

将页面标题与页面内容分离

缩略图

基本结构

1 <ul class="thumbnails">
2   <li class="span4">
3     <a href="#" class="thumbnail">
4       <img data-src="holder.js/300x200" alt="">
5     </a>
6   </li>
7   ...
8 </ul>

以上单纯以图片显示

包含更多内容

 1 <ul class="thumbnails">
 2   <li class="span4">
 3     <div class="thumbnail">
 4       <img data-src="holder.js/300x200" alt="">
 5       <h3>Thumbnail label</h3>
 6       <p>Thumbnail caption...</p>
 7     </div>
 8   </li>
 9   ...
10 </ul>

警告框

基本结构

1  <div class="alert">
2    <button type="button" class="close" data-dismiss="alert">&times;</button>
3    <strong>Warning!</strong> Best check yourself, you‘re not looking too good.
4    <a href="#" class="close" data-dismiss="alert">&times;</a>
5  </div>

功能类说明

• .close  关闭按钮。使用时还需要添加data-dismiss="alert"属性

进度条

基本结构

1 <div class="progress">
2   <div class="bar" style="width: 60%;"></div>
3 </div>

功能类说明

• .progress-striped  带条纹的进度条
• .active  带有动画效果

其他

堆叠样式

1 <div class="progress">
2   <div class="bar bar-success" style="width: 35%;"></div>
3   <div class="bar bar-warning" style="width: 20%;"></div>
4   <div class="bar bar-danger" style="width: 10%;"></div>
5 </div>

媒体对象

基本结构

 1 <div class="media">
 2   <a class="pull-left" href="#">
 3     <img class="media-object" data-src="holder.js/64x64">
 4   </a>
 5   <div class="media-body">
 6     <h4 class="media-heading">Media heading</h4>
 7     ...
 8  
 9     <!-- Nested media object -->
10     <div class="media">
11       ...
12     </div>
13   </div>
14 </div>

可嵌套使用，可以方便地模拟评论或文章列表

其他轻量级的工具组件

Wells

基本结构

1 <div class="well">
2   ...
3 </div>

为页面元素添加简单的嵌入效果

功能类说明

• .well-large、.well-small  更大/小的padding（未另外设置样式时文字大写不变）

关闭图标

1 <button class="close">&times;</button>
2 <!--  或者  -->
3 <a class="close" href="#">&times;</a>

辅助类

• .pull-left、.pull-right  使页面元素向左/右浮动
• .muted  改变页面元素颜色为#999
• .clearfix  清除浮动

一些通用类

• .*-large、.*-small、.*mini  改变页面元素尺寸
• .*-info、.*- success、.*-warning、.*-error  改变页面元素颜色或其含义