3.Bootstrap组件

1.导航元素

            标签式的导航菜单

            给一个无序列表添加 class="nav nav-tabs"             给任意一个 li 添加 class="active"(表示选中这个导航)  
<body>
    <div class="container">
        <p>标签式的导航菜单</p>
        <ul class="nav nav-tabs">
            <li> <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 class="active"><a href="#">Java</a></li>
            <li><a href="#">PHP</a></li>
        </ul>
    </div>
</body>

 

        胶囊式的导航菜单

            给一个无序列表添加 class="nav nav-pills"       给任意一个 li 添加 class="active"(表示选中这个导航)
<div class="container">
    <p>基本的胶囊式导航菜单</p>
    <ul class="nav nav-pills">
        <li><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 class="active"><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
</div>
 

垂直的胶囊式导航菜单

          给一个无序列表添加 class="nav nav-pills" 的同时添加class="nav-stacked"    给任意一个 li 添加 class="active"(表示选中这个导航)
<div class="container">
    <p>基本的垂直的胶囊式导航菜单</p>
    <ul class="nav nav-pills nav-stacked">
        <li><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 class="active"><a href="#">Java</a></li>
        <li><a href="#">PHP</a></li>
    </ul>
</div>

两端对齐导航

          让标签式导航两端对齐:给一个无序列表添加 class="nav nav-tabs nav-justified"      让胶囊式导航两端对齐:给一个无序列表添加 class="nav nav-pills nav-justified"
描述
.nav nav-tabs 标签页
.nav nav-pills 胶囊式标签页
.nav nav-pills nav-stacked 胶囊式标签页以垂直方向堆叠排列的
.nav-justified 两端对齐的标签页
2.分页

            默认分页

            给一个无序列表添加class="pagination"             给任意一个 li 添加 class="active"(表示选中这一页)
<div class="container">
    <p>分页导航</p>
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>

            翻页

            给一个无序列表添加class="pager"
<div class="container">
    <p>翻页导航</p>
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</div>

 

3.插件

           我们在使用 Bootstrap 插件时

            引入 Bootstrap 的核心 CSS 文件             引入 jquery 的核心 js 文件,需要在 bootstrap 的 js 之前引入             引入 Bootstrap 的核心 js 文件   4.下拉菜单

           使用一个 class="dropdown" 的div 包裹整个下拉框

         使用一个 class="dropdown-toggle" data-toggle="dropdown" 的按钮作为父菜单

          给父菜单后设置一个下拉箭头              使用一个 class="dropdown-menu" 的 ul 列表作为下拉菜单项            使用 class="dropdown-header" 的 li 作为分组的标题            使用 class="driver" 的 li 作为下拉分割线  
  <!-- 1.使用一个类名为dropdown 或 btn-group 的div包裹整个下拉框
         <div class="dropdown"></div>
         默认下拉框向上为 dropup ,向下为 dropdown
     -->
    <div class="dropdown">
        <!--
             使用 button 作为父菜单,使用类名: dropdown-toggle 和自定义 data-toggle属性
          -->
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            喜欢的频道
            <!-- 设置下拉箭头 -->
            <span class="caret"></span>
          </button>
 
        <!-- 下拉菜单项使用一个 ul 列表,并且定义一个类名为 dropdown-menu -->
        <ul class="dropdown-menu">
            <!-- 分组标题: li 添加类名 dropdown-header  来实现分组的功能-->
            <li class="dropdown-header">科普</li>
            <li><a href="#">人与自然</a></li>
 
            <!-- 分割线: li 添加类名 driver 来实现下拉分割线的功能 -->
            <li class="driver"></li>
            <li class="dropdown-header">影视</li>
            <li class="active"><a href="#">快乐大本营</a></li>
            <li class="disabled"><a href="#">暴走大事件</a></li>
            <li><a href="#">木鱼水心</a></li>
 
        </ul>
    </div>
</body>
 
  5.模态框

          使用方式一:通过 data 属性:在控制器元素(比如按钮或者链接)上设置属性data-toggle="modal" ,同时设置 data-target="#identifier" 或href="#identifier" 来指定要切换的特定的模态框(带有 id ="identifier" )

<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
      
  使用方式二:通过 JavaScript:使用这种技术,可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框:
 
        调用带有 id="identifier" 的模态框:
        打开模态框:$('#identifier').modal('show')
                关闭模态框:$('#identifier').modal('hide')
 
 
<button class="btn btn-primary btn-lg" id="btn">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>
            </div>
            <div class="modal-body">在这里添加一些文本</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
            </div>
        </div>
    </div>
</div>
 
 
<script>
    // 绑定按钮的点击事件
    $("#btn").click(function() {
        //手动打开模态框
        $('#myModal').modal('show');
    })
 
    //关闭模态框
    $("#submit_btn").click(function() {
        //手动关闭模态框
        $('#myModal').modal('hide');
    })
</script>

 

     

模态框常用改法

        提供一个模态框的常用改法模板:以添加用户为例(直接复制修改即可)    
<button class="btn btn-primary btn-lg" id="btn">开始演示模态框</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="uname" class="control-label col-md-2">姓名</label>
                        <div class="col-md-8">
                            <input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="upwd" class="control-label col-md-2">密码</label>
                        <div class="col-md-8">
                            <input type="text" id="upwd" class="form-control" placeholder="请输入密码" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>
 
<script>
    // 绑定按钮的点击事件
    $("#btn").click(function() {
        //手动打开模态框
        $('#myModal').modal('show');
    })
 
 
    //关闭模态框
    $("#submit_btn").click(function() {
        //手动关闭模态框
        $('#myModal').modal('hide');
    })
</script>

 

  

 

 

   
上一篇:复合选择器之子选择器


下一篇:制作web网页头部导航栏