[学习笔记] bootstrap(五) : 输入框组和简单导航元素

输入框组

简单版

<div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" placeholder="Email" class="form-control">
</div>

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="number" step="0.1" placeholder="Money" class="form-control">
    <span class="input-group-addon">.00</span>
</div>

按钮版

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn">^_^</button>
    </span>
    <input placeholder="UserName" class="form-control">
    <span class="input-group-btn">
        <button class="btn">GO</button>
    </span>
</div>

下拉按钮版(以及分割按钮)

<div class="input-group">
    <div class="input-group-btn">
        <button class="btn btn-default">下拉菜单</button>
        <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>
        <ul class="dropdown-menu">
            <li> <a href="#"> 菜单1 </a> </li>
            <li> <a href="#"> 菜单2 </a> </li>
            <li> <a href="#"> 菜单3 </a> </li>
            <li> <a href="#"> 菜单4 </a> </li>
        </ul>
    </div>
    <input placeholder="Type Words" class="form-control">
</div>

阐述一下最后这个复杂版:由一个输入框组为最大容器,里面包含了一个按钮组和一个input输入框,其中按钮组由2个按钮(其中一个用于触发下拉),一个下拉菜单构成!

导航元素

tabs:

<ul class="nav nav-tabs">
    <li class="active"> <a href="#" > 首页 </a> </li>
    <li> <a href="#" > 分类 </a> </li>
    <li> <a href="#" > 服务 </a> </li>
    <li> <a href="#" > 广告 </a> </li>
    <li> <a href="#" > 帮助 </a> </li>
    <li> <a href="#" > 关于 </a> </li>
    <li> <a href="#" > 联系我们 </a> </li>
</ul>

pills胶囊式:

<ul class="nav nav-pills">
    <li class="active"> <a href="#" > 首页 </a> </li>
    <li> <a href="#" > 分类 </a> </li>
    <li> <a href="#" > 服务 </a> </li>
    <li> <a href="#" > 广告 </a> </li>
    <li> <a href="#" > 帮助 </a> </li>
    <li> <a href="#" > 关于 </a> </li>
    <li> <a href="#" > 联系我们 </a> </li>
</ul>

一个样式变成垂直的(.nav-stacked)

<ul class="nav nav-pills nav-stacked">
    <li class="active"> <a href="#" > 首页 </a> </li>
    <li> <a href="#" > 分类 </a> </li>
    <li> <a href="#" > 服务 </a> </li>
    <li> <a href="#" > 广告 </a> </li>
    <li> <a href="#" > 帮助 </a> </li>
    <li> <a href="#" > 关于 </a> </li>
    <li> <a href="#" > 联系我们 </a> </li>
</ul>

带下拉,禁用,real tabs(Tab切换)

<ul class="nav nav-tabs">
    <li class="active"> <a data-toggle="tab"  href="#home" > 首页 </a> </li>
    <li> 
        <a data-toggle="dropdown" href="#" > 分类 <span class="caret"></span> </a>
        <ul class="dropdown-menu">
            <li> <a href="#" > 分类一 </a> </li>
            <li> <a href="#" > 分类2 </a> </li>
            <li> <a href="#" > 分类3 </a> </li>
            <li> <a href="#" > 分类4 </a> </li>
        </ul>
    </li>
    <li class="disabled"> <a href="#" > 服务 </a> </li>
    <li> <a  data-toggle="tab" href="#adv" > 广告 </a> </li>
    <li> <a  data-toggle="tab" href="#help" > 帮助 </a> </li>
    <li> <a  data-toggle="tab" href="#about" > 关于 </a> </li>
    <li> <a  data-toggle="tab" href="#phone" > 联系我们 </a> </li>
</ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        <h3>说出来你不信,我是主页</h3>
        <p>我是主页内容</p>
    </div>
    <div id="help" class="tab-pane fade">
        <h3>说出来你不信,我是帮助</h3>
        <p>我是帮助:求人不如求几!谷歌一下你就知道!</p>
    </div>
    <div id="about" class="tab-pane fade">
        <h3>说出来你不信,我不是帮助</h3>
        <p>我是关于:关于我是个好人的问题!已经有...</p>
    </div>
    <div id="phone" class="tab-pane fade">
        <h3>说出来你不信,我是联系方式</h3>
        <p>我是联系方式:求人不如求几!谷歌一下你就知道!</p>
    </div>
</div>

上面的导航栏由一个.nav-tabs的ul构成;其中有首页(默认激活),分类(下拉按钮):直接在li中添加一个下拉菜单,用a标签触发即可; 而对于可切换的tab:使用.tab-content和.tab-pane配合实现:由.tab-content的div中有多个带id的div,每个div必须带有样式.tab-pane,对应导航中a标签的href指向