Bootstrap <基础十二>下拉菜单(Dropdowns)

2019-06-25 19:18栏目:技术创新
TAG: 澳门新

Bootstrap 下拉菜单。下拉菜单是可切换的,是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现。

如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可。下面的实例演示了基本的下拉菜单:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div >     <button type="button"  id="dropdownMenu1"         data-toggle="dropdown">        主题             </button>     <ul  role="menu" aria-labelledby="dropdownMenu1">        <li role="presentation">           <a role="menuitem" tabindex="-1"  >Java</a>        </li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >数据挖掘</a>        </li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >              数据通信/网络           </a>        </li>        <li role="presentation" ></li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >分离的链接</a>        </li>     </ul>  </div>      </body>  </html>

结果如下所示:

图片 1

选项

对齐

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。下面的实例演示了这点:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 向右对齐下拉菜单</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div >     <button type="button"  id="dropdownMenu1"         data-toggle="dropdown">主题             </button>     <ul  role="menu"         aria-labelledby="dropdownMenu1">        <li role="presentation">           <a role="menuitem" tabindex="-1"  >Java</a>        </li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >数据挖掘</a>        </li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >              数据通信/网络           </a>        </li>        <li role="presentation" ></li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >分离的链接</a>        </li>     </ul>  </div>      </body>  </html>

结果如下所示:

图片 2

标题

您可以使用 class dropdown-header 向下拉菜单的标签区域添加标题。下面的实例演示了这点:

<!DOCTYPE html>  <html>  <head>     <title>Bootstrap 实例 - 下拉菜单标题</title>     <link   rel="stylesheet">     <script src="/scripts/jquery.min.js"></script>     <script src="/bootstrap/js/bootstrap.min.js"></script>  </head>  <body>    <div >     <button type="button"  id="dropdownMenu1"         data-toggle="dropdown">        主题             </button>     <ul  role="menu" aria-labelledby="dropdownMenu1">        <li role="presentation" >下拉菜单标题</li>        <li role="presentation" >           <a role="menuitem" tabindex="-1"  >Java</a>        </li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >数据挖掘</a>        </li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >              数据通信/网络           </a>        </li>        <li role="presentation" ></li>        <li role="presentation" >下拉菜单标题</li>        <li role="presentation">           <a role="menuitem" tabindex="-1"  >分离的链接</a>        </li>     </ul>  </div>      </body>  </html>

结果如下所示:

图片 3

 

 

 

系列文章:

Bootstrap <基础一> css 概览

Bootstrap<基础二>网络系统

Bootstrap<基础三>排版

Bootstrap<基础四> 代码

Bootstrap <基础五>表格

Bootstrap<基础六> 表单

Bootstrap <基础七>按钮

Bootstrap <基础八>图片

Bootstrap<基础九>辅助类

Bootstrap<基础十> 响应式实用工具

Bootstrap<基础十一>字体图标(Glyphicons)

Bootstrap <基础十二>下拉菜单(Dropdowns)

Bootstrap<基础十三> 按钮组

Bootstrap<基础十四> 按钮下拉菜单

Bootstrap<基础十五> 输入框组

Bootstrap<基础十六> 导航元素

Bootstrap<基础十七>导航栏

Bootstrap <基础十八>面包屑导航(Breadcrumbs)

Bootstrap <基础十九>分页

Bootstrap<基础二十> 标签

Bootstrap <基础二十一>徽章(Badges)

Bootstrap <基础二十二>超大屏幕(Jumbotron)

Bootstrap <基础二十三>页面标题(Page Header)

Bootstrap<基础二十四> 缩略图

Bootstrap <基础二十五>警告(Alerts)

Bootstrap <基础二十六>进度条

Bootstrap<基础二十七> 多媒体对象(Media Object)

Bootstrap <基础二十八>列表组

Bootstrap <基础二十九>面板(Panels)

Bootstrap <基础三十>Well

Bootstrap <基础三十一>插件概览

Bootstrap <基础三十二>模态框(Modal)插件


版权声明:本文由新浦京娱乐站_新浦京娱乐场官网_新浦京娱乐发布于技术创新,转载请注明出处:Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)