当前位置：首页 > news >正文

bootstrap学习笔记九（菜单，按钮。导航基本元素）

news 来源：原创 2024/5/14 7:34:08

有了bootstrap作导航不再麻烦，几个样式，几个标签就能轻松搞定。

下面就来分解学习导航条的制作。

一、首先是下拉菜单

<div class="dropdown">
  <div class="btn btn-info dropdown-toggle" id="fruit" data-toggle="dropdown">
    账号管理
    <span class="caret"></span>
  </div>
  <ul class="dropdown-menu" role="menu" aria-labelledby="fruit">
      <li role="presentation"><a role="menuitem" tabindex="-1">修改密码</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1">查询账户</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1">登出</a></li>
  </ul>
 </div>

View Code

效果图

1）下拉菜单分割线。

代码：

效果图

2）下拉菜单标题。

代码：

效果图

3）下拉菜单状态（选中，禁用）。

选中(激活)：class="active"

禁用：class="divider"

效果图

4）菜单向上，向下弹出

向上弹出（关键代码如下图）

效果图

5）向下弹出

向下弹出（关键代码如下图）

效果图

二、按钮

<div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button>
    <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span></button>
    <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-ok"></span></button>
    <button type="button" class="btn btn-warning"><span class="glyphicon glyphicon-remove"></span></button>
</div>

View Code

效果图

常用工具栏按钮

<div class="btn-toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button>
    <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
  </div>
</div>