3.Bootstrap组件

2021-11-29 14:02:28 阅读：176 来源： 互联网

标签：模态 Bootstrap 添加 nav 组件 identifier 导航 class

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>

标签：模态,Bootstrap,添加,nav,组件,identifier,导航,class
来源： https://www.cnblogs.com/BingBing-Deng/p/15619129.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9