首页W3C技术头条Bootstrap组件介绍

Bootstrap组件介绍

w3cschool小编 2021-01-22 10:20:13 浏览数 (426)
反馈

一、下拉菜单

用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。

1、实例

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<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>

  aria-haspopup :true表示点击的时候会出现菜单或是浮动元素; false表示没有pop-up效果。

  aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值:true表示元素是展开的;false表示元素不是展开的

  aria-labelledby:当想要的标签文本已在其他元素中存在时,可以使用aria-labelledby,并将其值为所有读取的元素的id。如下:

  当ul获取到焦点时,屏幕阅读器是会读:“选择您的职位”

  data-toggle: 表示什么事件类型发生

二、按钮式下拉菜单

  把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。

1、单按钮下拉菜单

<!-- Single button -->
<div class="btn-group">
 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Action <span class="caret"></span>
 </button>
 <ul class="dropdown-menu">
   <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>

  1311506-20180620151412372-1683903946鼠标指向时,显示背景颜色。

2、分裂式下拉菜单

只是多一个分开的按钮。

<!-- Split button -->
<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" aria-haspopup="true" aria-expanded="false">
   <span class="caret"></span>
   <span class="sr-only">Toggle Dropdown</span>​
 </button>
 <ul class="dropdown-menu">
   <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>

  1311506-20180620151529047-848509511可以看到分成了左右两个按钮。

三、面板

某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。

1、基本实例

默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。

<div class="panel panel-default">
 <div class="panel-body">
  Basic panel example
 </div>
</div>

  显示效果:

  1311506-20180620152012895-1387802416

2、带标题的面板

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的 <h1>-<h6> 标签,添加一个预定义样式的标题。不过,<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

为了给链接设置合适的颜色,务必将链接放到带有 .panel-title 类的标题标签内。


0 人点赞

相关课程 更多»

{{ relateCourse.bookname }}

{{ relateCourse.description }}

{{ relateCourse.watch_count }} 人参与

立即学习
相关文章 更多»
{{ relateArticle.title }} {{ relateArticle.postdate }}

最新文章

热门文章

更多»