2016年1月4日

bootstrap

导航栏

基本框架

<nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <a href="#"  class="navbar-brand"><strong>ninghao</strong>.net</a>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">课程</a></li>
                    <li><a href="">博客</a></li>
                    <li><a href="">手册</a></li>
                </ul>
                <form action="" class="navbar-form navbar-left">
                    <input type="text" placeholder="search" class="form-control">
                    <button type="submit">
                        <span class="glyphicon glyphicon-search"></span>
                    </button>
                </form>
                <a href="" class="btn btn-primary btn-sm navbar-btn navbar-right">订阅课程</a>
            <div class="profile navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="">登陆</a></li>
                    <li><a href="">注册</a></li>
                </ul>
                <p class="navbar-text">hello,你好<a href="#" class="navbar-link">niefee</a></p>
            </div>
            </div>          
        </nav>

<!-- 响应式收缩栏  -->
<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

    <div class="collapse navbar-collapse" id="responsive-navbar"></div>

.navbar-default:默认的白色样式。 .navbar-inverse:黑色样式。 .navbar-fixed-top:固定在顶部。 .navbar-static-top:跟随页面滚动。 .glyphicon .glyphicon-search:两个一起使用，定义一个icon图标。 .navbar-form .navbar-left:添加一个类，浮动在左边。 .navbar-text:给导航栏中的文字添加样式。 .navbar-link:给导航栏中的链接添加样式。

为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1">。

按钮组件

html 里面的 role 本质上是增强语义性，增强组件的可访问性、可用性和可交互性。设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

效果如下：：

下拉菜单

一般框架代码

<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 class="dropdown-header">Dropdown header</li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
   <!--  通过类名'.disabled'禁用菜单项 -->
    <li class="disabled"><a href="#">Separated link</a></li>
    <!-- 添加分割线 -->
    <li role="separator" class="divider"></li>
  </ul>
</div>

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的。如需将菜单右对齐，请使用 .dropdown-menu-right 类。

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

aria-hidden字符串。可选值为true和false,true表示元素隐藏(不可见)，false表示元素可见。

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

Previous2016年1月3日 Next2016年1月5日

Last updated 6 years ago

Was this helpful?