3.Bootstrap组件

2024-02-04 18:33:46

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>

码农公寓