bootstrap基本整理3

目录

• bootstrap基本整理<3>
  • bootstrap字体图标
  • bootstrap下拉菜单
  • bootstrap按钮组
    • 加载状态
    • 单个切换
    • 复选框
    • 单选按钮
  • 按钮组下拉菜单
  • 输入框组
  • 导航栏
    • 表格导航栏
    • 胶囊式的导航菜单
    • 默认导航栏

bootstrap基本整理<3>

@[基本实例|基于bootstrap框架]

---

bootstrap字体图标

用法：<span class="glyphicon glyphicon-search"></span>

更多字体图标

bootstrap下拉菜单

1.经过 data 属性：向连接或按钮添加 data-toggle="dropdown" 来切换下拉菜单

• role是为了适应老版本的浏览器设定的
• aria-labelledby与id对应起来，表示这些东西在对应的id中展示

<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    下拉菜单（Dropdown） <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

2.经过 JavaScript：经过 JavaScript 调用下拉菜单切换

$('.dropdown-toggle').dropdown();

bootstrap按钮组

加载状态

如需向按钮添加加载状态，只须要简单地向 button 元素添加 data-loading-text="Loading..." 做为其属性便可

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." 
    type="button"> 加载状态
</button>
<script>
    $(function() {
        $(".btn").click(function(){
 $(this).button('loading').delay(1000).queue(function() {
            });
        });
    });  
</script>

单个切换

如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 做为其属性便可

<button type="button" class="btn btn-primary" 
    data-toggle="button"> 单个切换
</button>

复选框

能够建立复选框组，并经过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 1
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox"> 选项 3
    </label>
</div>

单选按钮

能够建立单选按钮组，并经过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> 选项 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> 选项 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> 选项 3
    </label>
</div>

更多按钮组实例

按钮组下拉菜单

更多按钮下拉菜单实例

输入框组

输入框组实例

导航栏

表格导航栏

建立一个标签式的导航菜单：

• 以一个带有 class .nav 的无序列表开始。
• 添加 class .nav-tabs

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

胶囊式的导航菜单

若是须要把标签改为胶囊的样式，只须要使用 class .nav-pills 代替 .nav-tabs 便可

<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">SVN</a></li>
  <li><a href="#">iOS</a></li>
  <li><a href="#">VB.Net</a></li>
  <li><a href="#">Java</a></li>
  <li><a href="#">PHP</a></li>
</ul>

更多导航栏元素

默认导航栏

建立一个默认的导航栏的步骤以下：

• 向 <nav> 标签添加 class .navbar、.navbar-default。
• 向上面的元素添加 role="navigation"，有助于增长可访问性。
• 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a>
• 元素。这会让文本看起来更大一号。

• 为了向导航栏添加连接，只须要简单地添加带有 class .nav、.navbar-nav 的无序列表便可

  响应式导航栏

  Collapse插件

• data-toggle="collapse" 添加到您想要展开或折叠的组件的连接上。
• href 或 data-target 属性添加到父组件，它的值是子组件的 id。
• data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的连接上。

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseOne">
                点击我进行展开，再次点击我进行折叠。第 1 部分
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseTwo">
                点击我进行展开，再次点击我进行折叠。第 2 部分
            </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
            Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
            cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
            vice lomo.
        </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" 
                href="#collapseThree">
                点击我进行展开，再次点击我进行折叠。第 3 部分
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                vice lomo.
            </div>
        </div>
    </div>
</div>

更多关于插件