Bootstrap 插件

最新推荐文章于 2024-08-09 08:18:55 发布

栈老师不回家

最新推荐文章于 2024-08-09 08:18:55 发布

阅读量1k

点赞数 2

分类专栏： BootStrap 文章标签： bootstrap 前端 javascript

本文链接：https://blog.csdn.net/m0_52861684/article/details/127351001

版权

BootStrap 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

文章目录

一、导航

① 基本样式，nav 与 nav-tabs、nav-pills 组合制作导航；
② 分类，标签型（nav-tabs）、胶囊型（nav-pills）、堆栈（nav-stacked）、自适应（nav-justified）、面包屑式（breadcrumb）；
③ 面包屑式导航单独使用样式，不与 nav 一起使用，直接加入到 ol、ul 中即可，主要起的作用是告诉用户现在所处页面的位置；
④ 选中状态 active，禁用样式 disable。

这里以胶囊型为例看一下效果：

<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>

在这里插入图片描述

二、分页导航

分页随处可见，分为页码导航和翻页导航。
页码导航，ul 标签上加 pagination [pagination-lg | pagination-sm]。
翻页导航，ul 标签上加 pager。

翻页导航用的较少，下面以页码导航为例看一看效果：

<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>

在这里插入图片描述

三、下拉菜单

1.用法

在使用 Bootstrap 框架的下拉菜单时，必须使用两个 js！

<!-- 如果要使用Bootstrap框架的js插件，必须先调用jQuery -->
<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

要点：
① 使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框；
② 默认向下 dropdown，向上弹起加上 .dropup 即可；
③ 使用 button 作为父菜单，使用类名 dropdown-toggle 和自定义属性 data-toggle=“dropdown”；
④ 在 button 中利用 fonts 制作下拉箭头，放到 span 标签里；
⑤ 下拉菜单项使用一个 ul 列表，并且添加一个类 .dropdown-menu；
⑥ 分组分割线，给 li 添加类名 divider 来实现添加下拉分割线的功能；
⑦ 分组标题，给 li 添加类名 dropdown-header 实现分组的功能；
⑧ 对齐方式，默认左对齐 dropdown-menu-left，dropdown-menu-right 右对齐；
⑨ 激活状态 active，禁用状态 disabled。

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            喜欢的频道
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">-- 科普 --</li>
            <li class="active"><a href="http://tv.cctv.com/lm/ryzr/?ivk_sa=1024320u" target="_blank">人与自然</a></li>
            
            <li class="divider"></li>
            
            <li class="dropdown-header">-- 搞笑 --</li>
            <li><a href="https://www.mgtv.com/h/349986.html" target="_blank">快乐大本营</a></li>
            <li><a href="https://v.qq.com/x/cover/mzc00200zq52jsg/g0037impa7h.html?ptag=10527" target="_blank">欢乐喜剧人</a></li>
            <li><a href="https://v.youku.com/v_show/id_XNTQ2NTk2MjI0.html?source=baidu&refer=sousuotoufang_market.qrwang_00002944_000000_QJFFvi_19031900" target="_blank">生活大爆炸</a></li>
        </ul>
    </div>
</body>
</html>

运行结果：

在这里插入图片描述

四、模态框

1.用法

模态框是覆盖在父窗体上的子窗体，可提供信息、交互等。

① 通过 data 属性，在控制器元素（比如按钮或链接）上设置属性 data-toggle=“modal”，同时设置 data-target=“#identifier” 或 href=“#identifier” 来指定要切换的特定模态框（带有 id=“identifier”）；
② 通过 JavaScript，调用带有 id=“identifier” 的模态框。

$('#identifier').modal(options);

2.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <button type="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">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">模态框</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>
        </div>
      </div>    
</body>
</html>

在这里插入图片描述

这是用第一种方法实现模态框，这么多属性和类记不住，完全不用担心。既然是插件，那我们直接把插件代码复制过来粘贴上就可以，需要改的部分可以自行修改，那么我们去哪里复制插件代码呢？
首先打开 Bootstrap 官网，找到 JavaScript 插件，可以看到右边一栏里有模态框，同时这里也有许多其他的插件，教程很详细，非常好用，大大滴奈斯！

在这里插入图片描述

接下来，我们用第二种方法，JavaScript 方法试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
      <button class="btn btn-primary btn-lg" id="btn">添加用户</button>
      
      <!-- Modal -->
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></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="col-md-2 control-label">姓名</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="col-md-2 control-label">密码</label>
                    <div class="col-md-8">
                        <input type="password" 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>
        </div>
      </div>  
      <script type="text/javascript">
        //打开模态框
        $("#btn").click(function() {
            $("#myModal").modal("show");
        });
        //关闭模态框
        $("#submit_btn").click(function() {
            $("#myModal").modal("hide");
        });
    </script>  
</body>
</html>