Bootstrap简单入门（2）

作者: lvyweb | 来源:发表于2018-09-20 09:19 被阅读12次

Bootstrap简单入门（2）
bootstrap的简单入门
Bootstrap简单入门（1）
Bootstrap学习资源
对于web MVC的一些个人理解
Bootstrap
前端快速开发框架BootStrap示例
BootStrap入门
Bootstrap入门
bootstrap入门

第四章：Bootstrap支持的JavaScript插件

概览

JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js或压缩版的 bootstrap.min.js）。
建议使用压缩版的 JavaScript 文件
bootstrap.js和 bootstrap.min.js 都包含了所有插件，你在使用时
，只需选择一个引入页面就可以了。

（1）模态弹窗（Modal）：对应的插件是`modal.js`

模态弹窗--介绍

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
不支持同时打开多个模态框
千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框，需要自己写额外的代码来实现。

模态弹窗--使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>模态弹出框</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container">
<button class="btn btn-primary btnClick" type="button">点击我</button>
<div class="modal" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </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-dialog -->
</div><!-- /.modal -->

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">带有过渡动画的模态框</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </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>
</div>


 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
  $(function(){
    $(".btnClick").click(function(){
      $("#mymodal").modal("toggle");
    });
  });
</script>
  </body>
</html>

（2）下拉菜单（Dropdown）：对应的插件是`dropdown.js`

下拉菜单--介绍

前面讲解了下拉菜单，但是没有涉及到交互部分，这次将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

下拉菜单--使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>下拉菜单</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
 <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid"> 
    <div class="navbar-header">
        <a class="navbar-brand" href="#">高精尖</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">iOS</a></li>
            <li><a href="#">SVN</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    JavaScript 
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">Bootstrap</a></li>
                    <li class="divider"></li>
                    <li><a href="#">JQuery</a></li>
                    <li class="divider"></li>
                    <li><a href="#">download</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </div>
</nav>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

（3）选项卡（Tab）：对应的插件是`tab.js`

选项卡--介绍

标签页（Tab）在 Bootstrap 导航元素一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

选项卡--使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>选项卡</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">
            高精尖
        </a>
    </li>
    <li><a href="#ios" data-toggle="tab">iOS</a></li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle"
           data-toggle="dropdown">Java
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>北京师范大学“未来教育”高精尖创新中心是北京市政府支持的高水平国际化创新平台，服务北京全国科技创新中心建设及“高精尖”产业结构调整。中心的核心任务是面向北京市基础教育领域师生未来教育发展的需要，研发基于大数据的智能教育公共服务平台，为全市师生提供创新的教育应用服务，并探索移动互联时代的创新教育业务形态和治理方案。根据中心的核心任务，拟从网络时代学习基本理论、学科教育、教育领域的智能技术、在线教育资源与服务、教育应用与治理技术这五个方面的研究领域招聘相关博士后人才。</p>
    </div>
    <div class="tab-pane fade" id="ios">
        <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple
            TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
        <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
        <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
        </p>
    </div>
</div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

（4）提示框（Tooltip）：对应的插件是`tooltip.js`

提示框--介绍

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

提示框--使用

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>提示框</title>
    <style>
        .btn{
            margin-left: 100px;
        }
    </style>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <h4>提示工具（Tooltip）插件 - 按钮</h4>
        <button type="button" class="btn btn-default" data-toggle="tooltip"
                title="默认的 Tooltip">
            默认的 Tooltip
        </button>
        <button type="button" class="btn btn-default" data-toggle="tooltip"
                data-placement="left" title="左侧的 Tooltip">
            左侧的 Tooltip
        </button>
        <button type="button" class="btn btn-default" data-toggle="tooltip"
                data-placement="top" title="顶部的 Tooltip">
            顶部的 Tooltip
        </button>
        <button type="button" class="btn btn-default" data-toggle="tooltip"
                data-placement="bottom" title="底部的 Tooltip">
            底部的 Tooltip
        </button>
        <button type="button" class="btn btn-default" data-toggle="tooltip"
                data-placement="right" title="右侧的 Tooltip">
            右侧的 Tooltip
        </button>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function () { $("[data-toggle='tooltip']").tooltip(); });
    </script>
  </body>
</html>

（5）弹出框（Popover）：对应的插件是`popover.js`

（6）警告框（Alert）：对应的插件是`alert.js`

（7）按钮（Button）：对应的插件是`button.js`

（8）折叠/手风琴（Collapse）：对应的插件是`collapse.js`

（9）图片轮播（carousel）：对应的插件是`carousel.js`

（10）滚动监听（Scrollspy）：对应的插件是`scrollspy.js`

（11）动画过渡（transitions）：对应的插件是`transition.js`

（12）自动定位浮标（Affix）：对应的插件是`affix.js`

Bootstrap简单入门（2）
第四章：Bootstrap支持的JavaScript插件概览 JavaScript 插件可以单个引入（使用 Bo...
bootstrap的简单入门
bootstrap 入门的使用在做前端开发中，其实有百分之四十的时间用来布局写样式，百分之三十用来写JS逻辑交互...
Bootstrap简单入门（1）
第一章 Bootstrap简介定义 Bootstrap官网给出的解释是：简洁、直观、强悍、移动设备优先的前端开发...
Bootstrap学习资源
bootstrap笔记总结 Bootstrap入门笔记之（三）栅格系统我的Bootstrap笔记，常用类名知...
对于web MVC的一些个人理解
最近帮朋友做个小网站，刚开始用angular+bootstrap做前端，angular入门不简单，但是熟悉了之后就...
Bootstrap
Bootstrap中文网在简书上看到的一篇不错的关于bootstrap的文章。另一篇Bootstrap快速入门 1...
前端快速开发框架BootStrap示例
参考为什么前端工程师多不愿意用 Bootstrap 框架？boostrap入门示例Github bootstrap...
BootStrap入门
Q1：BootStrap是什么? 简单、灵活的用于搭建Web页面的HTML、CSS、JS的工具集，即前端开发框架
Bootstrap入门
Bootstrap简介Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。是基于 HTML、CSS...
bootstrap入门
了解之路： 1. 首先按照官网了解一下，下载bootstrap文件，然后按照官网开始第一个页面；这样就能够了解到b...