Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】

文档中心

bootstrap框架

- 下载bootstrap：
- 在项目中使用bootstrap：
- Bootstrap3.0（基于jQuery）
- - 1、表单
  - 2、按钮、
  - 10、网格系统
  - - 10.1
    - 10.2偏移列
    - 10.3嵌套列
    - 10.4列排序
  - 3、输入框组、
  - 4、导航栏、
  - 5、下拉菜单、
  - 6、滚动监听、
  - 7、提示工具、
  - 8、折叠、
  - 9、轮播
  - 10、UI编辑器

下载bootstrap：

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：
Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】

Bootstrap 下载
您会看到两个按钮：

Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

本教程编写时，使用的是最新版（Bootstrap 3）。

文件结构
预编译的 Bootstrap
当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：
Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】

已编译的 Bootstrap 文件结构
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap 源代码
如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
Bootstrap 入门级教程/知识总结/速成/进阶版/全面详细【含代码】

Bootstrap 源代码结构
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

在项目中使用bootstrap：

<!DOCTYPE html><html>   <head>      <title>Bootstrap 模板</title>      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <!-- 引入 Bootstrap -->      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->      <!--[if lt IE 9]>  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>      <![endif]-->   </head>   <body>      <h1>Hello, world!</h1><!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->      <script src="https://code.jquery.com/jquery.js"></script>      <!-- 包括所有已编译的插件 -->      <script src="js/bootstrap.min.js"></script>   </body></html>

或者

国内推荐使用 Staticfile CDN 上的库：<!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

总结：bootstrap的使用有两种方式，一是官网下载bootstrap把文件放到项目中，二是用CDN的方式引入

Bootstrap3.0（基于jQuery）

1、表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父元素添加 role=“form”。
把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。
向所有的文本元素、和添加 class =“form-control” 。 </li> </ul> <pre><code class="prism language-css"><form role="form"> <div class="form-group"> <label for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label for="inputfile">文件输入</label> <input type="file" id="inputfile"> "help-block">这里是块级帮助文本的实例。 </div> <div class="checkbox"> <label> <input type="checkbox">请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button></code></pre> 水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行： <ul> <li> 向父元素添加 class .form-horizontal。 </li> <li> 把标签和控件放在一个带有 class .form-group 的 <div> 中。 </li> <li> 向标签添加 class .control-label。 </li> </ul> 如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向标签添加 class .form-inline。 <pre><code class="prism language-css"><form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="name">名称</label> <input type="text" class="form-control" id="name" placeholder="请输入名称"> </div> <div class="form-group"> <label class="sr-only" for="inputfile">文件输入</label> <input type="file" id="inputfile"> </div> <div class="checkbox"> <label> <input type="checkbox">请打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button></code></pre> <h3>2、按钮、</h3> 您可以 通过 JavaScript 启用按钮（Button）插件，如下所示： $(‘.btn’).button() <a href="https://www.csdndoc.com/tag/%e6%96%b9%e6%b3%95" title="View all posts in 方法" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">方法</a> 下面是一些按钮（Button）插件中有用的方法： <table> <thead> <tr> <th>方法</th> <th>描述</th> <th>实例</th> </tr> </thead> <tbody> <tr> <td>button(‘toggle’)</td> <td>切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。</td> <td>$().button(‘toggle’)</td> </tr> <tr> <td>.button(‘loading’)</td> <td>当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。</td> <td>$().button(‘loading’)</td> </tr> <tr> <td>.button(‘reset’)</td> <td>重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。</td> <td>$().button(‘reset’)</td> </tr> <tr> <td>.button(string)</td> <td>该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。</td> <td>$().button(string)</td> </tr> </tbody> </table> <pre><code class="prism language-javascript">如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可<h2>点击每个按钮查看方法效果</h2><h4>演示 .button('toggle') 方法</h4><div id="myButtons1" class="bs-example"> <button type="button" class="btn btn-primary">原始</button></div> <h4>演示 .button('loading') 方法</h4><div id="myButtons2" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">原始 </button></div> <h4>演示 .button('reset') 方法</h4><div id="myButtons3" class="bs-example"> <button type="button" class="btn btn-primary" data-loading-text="Loading...">原始 </button></div> <h4>演示 .button(string) 方法</h4><button type="button" class="btn btn-primary" id="myButton4" data-complete-text="Loading finished">请点击我</button><script>$(function () { $("#myButtons1 .btn").click(function(){ $(this).button('toggle'); }); }); $(function() { $("#myButtons2 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { }); }); });$(function() { $("#myButtons3 .btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); $(function() { $("#myButton4").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });</script></code></pre> <h3>10、网格系统</h3> <h4>10.1</h4> 响应式、移动设备优先，一般分为12列 响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 <ul> <li> 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。 </li> <li> 使用行来创建列的水平组。 </li> <li> 内容应该放置在列内，且唯有列可以是行的直接子元素。 </li> <li> 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 </li> <li> 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。 </li> <li> 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。 </li> </ul> <pre><code class="prism language-css">/* 以下在less条件下使用*//* 超小设备（手机，小于 768px） *//* Bootstrap 中默认情况下没有媒体查询 *//* 小型设备（平板电脑，768px 起） *//*CSS中的media查询 @media screen (max-width:960px){....}*/@media (min-width: @screen-sm-min) { ... }/* 中型设备（台式电脑，992px 起） */@media (min-width: @screen-md-min) { ... }/* 大型设备（大台式电脑，1200px 起） */@media (min-width: @screen-lg-min) { ... }@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }</code></pre> <table> <thead> <tr> <th>超小设备手机（<768px）</th> <th>小型设备平板电脑（≥768px）</th> <th>中型设备台式电脑（≥992px）</th> <th>大型设备台式电脑（≥1200px）</th> <th></th> </tr> </thead> <tbody> <tr> <td>网格行为</td> <td>一直是水平的</td> <td>以折叠开始，断点以上是水平的</td> <td>以折叠开始，断点以上是水平的</td> <td>以折叠开始，断点以上是水平的</td> </tr> <tr> <td>最大容器宽度</td> <td>None (auto)</td> <td>750px</td> <td>970px</td> <td>1170px</td> </tr> <tr> <td>Class 前缀</td> <td>.col-xs-</td> <td>.col-sm-</td> <td>.col-md-</td> <td>.col-lg-</td> </tr> <tr> <td>列数量和</td> <td>12</td> <td>12</td> <td>12</td> <td>12</td> </tr> <tr> <td>最大列宽</td> <td>Auto</td> <td>60px</td> <td>78px</td> <td>95px</td> </tr> <tr> <td>间隙宽度</td> <td>30px </td> <td></td> <td></td> <td></td> </tr> <tr> <td>（一个列的每边分别 15px）</td> <td>30px </td> <td></td> <td></td> <td></td> </tr> <tr> <td>（一个列的每边分别 15px）</td> <td>30px </td> <td></td> <td></td> <td></td> </tr> <tr> <td>（一个列的每边分别 15px）</td> <td>30px </td> <td></td> <td></td> <td></td> </tr> <tr> <td>（一个列的每边分别 15px）</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td>可嵌套</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>偏移量</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>列排序</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> <pre><code class="prism language-css"><div class="container"> <h1>Hello, world!</h1> <div class="row"><div class="col-sm-3 col-md-6 col-lg-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </div><div class="col-sm-9 col-md-6 col-lg-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. </div> </div></div></code></pre> <h4>10.2偏移列</h4> 为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。 <pre><code class="prism language-css"><div class="container"> <h1>Hello, world!</h1> <div class="row" > <div class="col-md-6 col-md-offset-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> </div></div></code></pre> <h4>10.3嵌套列</h4> 为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。 <pre><code class="prism language-css"><div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>第一列</h4> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>第二列 - 分为四个盒子</h4> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> </div> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim. </div> </div> </div> </div></div></code></pre> <h4>10.4列排序</h4> 您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。 在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。 <pre><code class="prism language-css"><div class="container"> <h1>Hello, world!</h1> <div class="row"> 排序前 <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div> <div class="row"> 排序后 <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div></div></code></pre> css组件 <h3>3、输入框组、</h3> 输入框组。输入框组扩展自表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 向 .form-control 添加前缀或后缀元素的步骤如下： <ul> <li> 把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。 </li> <li> 接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 内放置额外的内容。 </li> <li> 把该 放置在元素的前面或者后面。 </li> </ul> 在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可 <pre><code class="prism language-css"><div style="padding: 100px 100px 10px;"> <form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单"caret"> </button> <ul class="dropdown-menu"><li> <a href="#">功能</a></li><li> <a href="#">另一个功能</a></li><li> <a href="#">其他</a></li><li class="divider"></li><li> <a href="#">分离的链接</a></li> </ul> </div> <input type="text" class="form-control"> </div> </div> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单"caret"> </button> <ul class="dropdown-menu pull-right"><li> <a href="#">功能</a></li><li> <a href="#">另一个功能</a></li><li> <a href="#">其他</a></li><li class="divider"></li><li> <a href="#">分离的链接</a></li> </ul> </div> </div> </div> </div> </div></code></pre> <h3>4、导航栏、</h3> 创建一个标签式的导航菜单： <ul> <li> 以一个带有 class .nav 的无序列表开始。 </li> <li> 添加 class .nav-tabs。 </li> </ul> <pre><code class="prism language-css">标签式的导航菜单<ul class="nav nav-tabs"> <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>//如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可<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>//class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。<ul class="nav nav-pills nav-stacked"> <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 class="nav nav-pills nav-justified"> <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></code></pre> 带有下拉菜单的标签 向标签添加下拉菜单的步骤如下： <ul> <li> 以一个带有 class .nav 的无序列表开始。 </li> <li> 添加 class .nav-tabs。 </li> <li> 添加带有 .dropdown-menu class 的无序列表。 </li> </ul> <pre><code class="prism language-css">带有下拉菜单的标签 <ul class="nav nav-tabs"> <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 class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java "caret"> </a> <ul class="dropdown-menu"> <li><a href="#">Swing</a></li> <li><a href="#">jMeter</a></li> <li><a href="#">EJB</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> </ul> </li> <li><a href="#">PHP</a></li> </ul></code></pre> （js插件） <h3>5、下拉菜单、</h3> <pre><code class="prism language-javascript">//您可以切换下拉菜单（Dropdown）插件的隐藏内容：//通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：<div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：<div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> 下拉菜单（Dropdown） <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul></div>//通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：$('.dropdown-toggle').dropdown()</code></pre> <pre><code class="prism language-javascript"><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"> Java<b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分离的链接</a></li> <li class="divider"></li> <li><a href="#">另一个分离的链接</a></li> </ul> </li> </ul> </div> </div></nav></code></pre> <h3>6、滚动监听、</h3> 滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。 如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 <pre><code class="prism language-javascript">通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。<body data-spy="scroll" data-target=".navbar-example">...<div class="navbar-example"> <ul class="nav nav-tabs"> ... </ul></div>...</body>通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：$('body').scrollspy({ target: '.navbar-example' })</code></pre> .scrollspy(‘refresh’)：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。下面是使用该方法的语法。 <pre><code class="prism language-javascript">$('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') })</code></pre> <table> <thead> <tr> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td>activate.bs.scrollspy</td> <td>每当一个新项目被滚动监听激活时，触发该事件。</td> <td>$(‘#myScrollspy’).on(‘activate.bs.scrollspy’, function () { // 执行一些动作… })</td> </tr> </tbody> </table> <pre><code class="prism language-javascript"><nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">教程名称</a> </div> <div class="collapse navbar-collapse bs-js-navbar-scrollspy"> <ul class="nav navbar-nav"> <li class="active"><a href="#ios">iOS</a></li> <li><a href="#svn">SVN</a></li> <li class="dropdown"> <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <li><a href="#jmeter" tabindex="-1">jmeter</a></li> <li><a href="#ejb" tabindex="-1">ejb</a></li> <li class="divider"></li> <li><a href="#spring" tabindex="-1">spring</a></li> </ul> </li> </ul> </div> </div> </nav><div data-spy="scroll" data-target="#myScrollspy" data-offset="0" style="height:200px;overflow:auto; position: relative;"> <div class="section"> <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);"> &times; 删除该部分</a></small> </h4> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="section"> <h4 id="svn">SVN<small></small></h4> <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p> </div> <div class="section"> <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);"> &times; 删除该部分</a></small> </h4> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="section"> <h4 id="ejb">EJB</h4> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p> </div> <div class="section"> <h4 id="spring">Spring</h4> <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p> <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p> </div></div><span id="activeitem" style="color:red;"></span><script> $(function(){ removeSection = function(e) { $(e).parents(".section").remove(); $('[data-spy="scroll"]').each(function () { var $spy = $(this).scrollspy('refresh') }); } $("#myScrollspy").scrollspy(); $('#myScrollspy').on('activate.bs.scrollspy', function () { var currentItem = $(".nav li.active > a").text(); $("#activeitem").html("目前您正在查看 - " + currentItem); }) });</script></code></pre> <pre><code class="prism language-javascript">//水平监听<nav class="navbar navbar-inverse navbar-fixed-top">... <ul class="nav navbar-nav"> <li><a href="#section1">Section 1</a></li> ...</nav><div data-spy="scroll" data-target=".navbar" data-offset="12">  <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation bar while scrolling!</p> </div> ...</div>//垂直监听<body data-spy="scroll" data-target="#myScrollspy" data-offset="20"> <div class="container"> <div class="row"> <nav class="col-sm-3" id="myScrollspy"> <ul class="nav nav-pills nav-stacked"> <li><a href="#section1">Section 1</a></li> ... </ul> </nav> <div class="col-sm-9"> <div id="section1"> <h1>Section 1</h1> <p>Try to scroll this page and look at the navigation list while scrolling!</p> </div> ... </div> </div> </div></body></code></pre> <h3>7、提示工具、</h3> 提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）： <ul> <li> 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=“tooltip” 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。 <pre><code class="prism language-javascript"><a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a></code></pre> </li> <li> 通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）： $(‘#identifier’).tooltip(options) </li> </ul> 提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）： <pre><code class="prism language-javascript">$(function () { $("[data-toggle='tooltip']").tooltip(); });</code></pre> <table> <thead> <tr> <th>选项名称</th> <th>类型/默认值</th> <th>Data 属性名称</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>animation</td> <td>boolean默认值：true</td> <td>data-animation</td> <td>提示工具使用 CSS 渐变滤镜效果。</td> </tr> <tr> <td>html</td> <td>boolean默认值：false</td> <td>data-html</td> <td>向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。</td> </tr> <tr> <td>placement</td> <td>string</td> <td>function默认值：top</td> <td>data-placement</td> </tr> <tr> <td>selector</td> <td>string默认值：false</td> <td>data-selector</td> <td>如果提供了一个选择器，提示工具对象将被委派到指定的目标。</td> </tr> <tr> <td>title</td> <td>string</td> <td>function默认值：‘’</td> <td>data-title</td> </tr> <tr> <td>trigger</td> <td>string默认值：‘hover focus’</td> <td>data-trigger</td> <td>定义如何触发提示工具： **click</td> </tr> <tr> <td>delay</td> <td>number</td> <td>object默认值：0</td> <td>data-delay</td> </tr> </tbody> </table> delay: { show: 500, hide: 100 } | | container | string | false默认值：false | data-container | 向指定元素追加提示工具。 实例： container: ‘body’ | <pre><code class="prism language-javascript"><div style="padding: 100px 100px 10px;"> 这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="show">Tooltip 方法 show </a>. 这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip" data-placement="left" title="hide">Tooltip 方法 hide </a>. 这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="top" title="destroy">Tooltip 方法 destroy </a>. 这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="bottom" title="toggle">Tooltip 方法 toggle </a>. <br><br><br><br><br><br> <p class="tooltip-options" > 这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2 </h2>">Tooltip 方法 options </a>. </p> <script>$(function () { $('.tooltip-show').tooltip('show');}); $(function () { $('.tooltip-hide').tooltip('hide');}); $(function () { $('.tooltip-destroy').tooltip('destroy');}); $(function () { $('.tooltip-toggle').tooltip('toggle');}); $(function () { $(".tooltip-options a").tooltip({html : true }); });</script></div></code></pre> <h3>8、折叠、</h3> <table> <thead> <tr> <th>Class</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>.collapse</td> <td>隐藏内容。</td> </tr> <tr> <td>.collapse.in</td> <td>显示内容。</td> </tr> <tr> <td>.collapsing</td> <td>当过渡效果开始时被添加，当过渡效果完成时被移除。</td> </tr> </tbody> </table> <ul> <li> 通过 data 属性：向元素添加 data-toggle=“collapse” 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。 为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent=“#selector”。 </li> <li> 通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示： $(‘.collapse’).collapse() </li> </ul> <table> <thead> <tr> <th>选项名称</th> <th>类型/默认值</th> <th>Data 属性名称</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>parent</td> <td>selector默认值：false</td> <td>data-parent</td> <td>如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。</td> </tr> <tr> <td>toggle</td> <td>boolean默认值：true</td> <td></td> <td></td> </tr> </tbody> </table> <pre><code class="prism language-javascript"><div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-info"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> 点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div> <div class="panel panel-warning"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> 点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法 </a> </h4> </div> <div id="collapseFour" class="panel-collapse collapse"> <div class="panel-body"> Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. </div> </div> </div></div><script>$(function () { $('#collapseFour').collapse({ toggle: false })}); $(function () { $('#collapseTwo').collapse('show')}); $(function () { $('#collapseThree').collapse('toggle')}); $(function () { $('#collapseOne').collapse('hide')});</script></code></pre> <h3>9、轮播</h3> Bootstrap 轮播**（Carousel）**插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。 <ul> <li> 通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。 <ul> <li> 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。 </li> <li> 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=“2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。 </li> <li> data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放。 </li> </ul> </li> <li> 通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示： <pre><code class="prism language-javascript">$('.carousel').carousel()</code></pre> </li> </ul> <table> <thead> <tr> <th>选项名称</th> <th>类型/默认值</th> <th>Data 属性名称</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>interval</td> <td>number默认值：5000</td> <td>data-interval</td> <td>自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。</td> </tr> <tr> <td>pause</td> <td>string默认值：“hover”</td> <td>data-pause</td> <td>鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。</td> </tr> <tr> <td>wrap</td> <td>boolean默认值：true</td> <td>data-wrap</td> <td>轮播是否连续循环。</td> </tr> </tbody> </table> 下面是一些轮播（Carousel）插件中有用的方法： <table> <thead> <tr> <th>方法</th> <th>描述</th> <th>实例</th> </tr> </thead> <tbody> <tr> <td>.carousel(options)</td> <td>初始化轮播为可选的 options 对象，并开始循环项目。</td> <td>$(‘#identifier’).carousel({ interval: 2000 })</td> </tr> <tr> <td>.carousel(‘cycle’)</td> <td>从左到右循环轮播项目。</td> <td>$(‘#identifier’).carousel(‘cycle’)</td> </tr> <tr> <td>.carousel(‘pause’)</td> <td>停止轮播循环项目。</td> <td>$(‘#identifier’).carousel(‘pause’)</td> </tr> <tr> <td>.carousel(number)</td> <td>循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。</td> <td>$(‘#identifier’).carousel(number)</td> </tr> <tr> <td>.carousel(‘prev’)</td> <td>循环轮播到上一个项目。</td> <td>$(‘#identifier’).carousel(‘prev’)</td> </tr> <tr> <td>.carousel(‘next’)</td> <td>循环轮播到下一个项目。</td> <td>$(‘#identifier’).carousel(‘next’)</td> </tr> </tbody> </table> <pre><code class="prism language-javascript"><div id="myCarousel" class="carousel slide">  <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </div> <div class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </div> </div>  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a>  <div style="text-align:center;"> <input type="button" class="btn start-slide" value="Start"> <input type="button" class="btn pause-slide" value="Pause"> <input type="button" class="btn prev-slide" value="Previous Slide"> <input type="button" class="btn next-slide" value="Next Slide"> <input type="button" class="btn slide-one" value="Slide 1"> <input type="button" class="btn slide-two" value="Slide 2"> <input type="button" class="btn slide-three" value="Slide 3"> </div></div> <script>$(function(){ // 初始化轮播 $(".start-slide").click(function(){ $("#myCarousel").carousel('cycle'); }); // 停止轮播 $(".pause-slide").click(function(){ $("#myCarousel").carousel('pause'); }); // 循环轮播到上一个项目 $(".prev-slide").click(function(){ $("#myCarousel").carousel('prev'); }); // 循环轮播到下一个项目 $(".next-slide").click(function(){ $("#myCarousel").carousel('next'); }); // 循环轮播到某个特定的帧 $(".slide-one").click(function(){ $("#myCarousel").carousel(0); }); $(".slide-two").click(function(){ $("#myCarousel").carousel(1); }); $(".slide-three").click(function(){ $("#myCarousel").carousel(2); }); });</script></code></pre> <table> <thead> <tr> <th>事件</th> <th>描述</th> <th>实例</th> </tr> </thead> <tbody> <tr> <td>slide.bs.carousel</td> <td>当调用 slide 实例方法时立即触发该事件。</td> <td>$(‘#identifier’).on(‘slide.bs.carousel’, function () { // 执行一些动作… })</td> </tr> <tr> <td>slid.bs.carousel</td> <td>当轮播完成幻灯片过渡效果时触发该事件。</td> <td>$(‘#identifier’).on(‘slid.bs.carousel’, function () { // 执行一些动作… })</td> </tr> </tbody> </table> <h3>10、UI编辑器</h3> https://www.runoob.com/bootstrap/bootstrap-ui-editor.html <a href="http://www.ycplywood.com.cn" target="_blank">情感课堂</a> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="https://www.csdndoc.com/tag/%e5%85%83%e7%b4%a0" rel="tag">元素</a> <a href="https://www.csdndoc.com/tag/%e6%8c%89%e9%92%ae" rel="tag">按钮</a> <a href="https://www.csdndoc.com/tag/%e6%96%b9%e6%b3%95" rel="tag">方法</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <a href="https://www.csdndoc.com/doc/12588.html" rel="prev">【前端面试宝典】js浅拷贝深拷贝</a> </div> <div class="post-next twofifth"> 下一篇 <a href="https://www.csdndoc.com/doc/12590.html" rel="next">Vue3.0入门级教程/总结/一小时速成【含代码、文档、资源】</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="https://www.csdndoc.com/doc/12899.html">Android模拟器 7.1 （64）以上版本安装xposed框架</a></li> <li><a href="https://www.csdndoc.com/wzlb/22444.html">微信最好玩的小程序</a></li> <li><a href="https://www.csdndoc.com/wzlb/24943.html">现在离婚需要什么程序</a></li> <li><a href="https://www.csdndoc.com/doc/5884.html">SpringBoot日记本系统全程直播03：把登录后台接起来撒~~</a></li> <li><a href="https://www.csdndoc.com/doc/10726.html">Nginx的使用讲解</a></li> <li><a href="https://www.csdndoc.com/doc/10065.html">HarmonyOS初探06——使用DevEco Studio模拟器端口被占用无法启动</a></li> <li><a href="https://www.csdndoc.com/doc/15577.html">JDBC详解</a></li> <li><a href="https://www.csdndoc.com/doc/12935.html">【超详细】Windows设置远程唤醒WOL+远程连接（远程开机）</a></li> <li><a href="https://www.csdndoc.com/doc/11535.html">关于解决Android系统开发者选项关闭动画后ValueAnimator不生效的问题</a></li> <li><a href="https://www.csdndoc.com/doc/7389.html">MySQL 主从GTID不一致导致主从切换报错</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="https://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button">☚</button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><style> .custom-html-widget p { font-family: 'Arial', sans-serif; font-size: 26px; line-height: 1.5; text-align: justify; margin-bottom: 20px; color: black; } </style> 水利万物而不争, 而万物莫能与之争。</div></div> <div class="widget box row widget_tag_cloud"><h3>标签</h3><div class="tagcloud"><a href="https://www.csdndoc.com/tag/%e4%bb%a3%e7%a0%81" class="tag-cloud-link tag-link-19 tag-link-position-1" style="font-size: 13.965217391304pt;" aria-label="代码 (786个项目)">代码</a> <a href="https://www.csdndoc.com/tag/%e5%85%83%e7%b4%a0" class="tag-cloud-link tag-link-500 tag-link-position-2" style="font-size: 12.747826086957pt;" aria-label="元素 (629个项目)">元素</a> <a href="https://www.csdndoc.com/tag/%e5%87%bd%e6%95%b0" class="tag-cloud-link tag-link-111 tag-link-position-3" style="font-size: 15.791304347826pt;" aria-label="函数 (1,123个项目)">函数</a> <a href="https://www.csdndoc.com/tag/%e5%8a%9f%e8%83%bd" class="tag-cloud-link tag-link-294 tag-link-position-4" style="font-size: 9.9478260869565pt;" aria-label="功能 (370个项目)">功能</a> <a href="https://www.csdndoc.com/tag/%e5%8f%82%e6%95%b0" class="tag-cloud-link tag-link-680 tag-link-position-5" style="font-size: 9.4608695652174pt;" aria-label="参数 (335个项目)">参数</a> <a href="https://www.csdndoc.com/tag/%e5%8f%98%e9%87%8f" class="tag-cloud-link tag-link-81 tag-link-position-6" style="font-size: 11.165217391304pt;" aria-label="变量 (470个项目)">变量</a> <a href="https://www.csdndoc.com/tag/%e5%91%bd%e4%bb%a4" class="tag-cloud-link tag-link-570 tag-link-position-7" style="font-size: 9.4608695652174pt;" aria-label="命令 (336个项目)">命令</a> <a href="https://www.csdndoc.com/tag/%e5%9c%a8%e8%bf%99%e9%87%8c" class="tag-cloud-link tag-link-33 tag-link-position-8" style="font-size: 21.147826086957pt;" aria-label="在这里 (3,056个项目)">在这里</a> <a href="https://www.csdndoc.com/tag/%e5%ad%97%e7%ac%a6%e4%b8%b2" class="tag-cloud-link tag-link-556 tag-link-position-9" style="font-size: 10.678260869565pt;" aria-label="字符串 (428个项目)">字符串</a> <a href="https://www.csdndoc.com/tag/%e5%ae%b9%e5%99%a8" class="tag-cloud-link tag-link-332 tag-link-position-10" style="font-size: 9.4608695652174pt;" aria-label="容器 (338个项目)">容器</a> <a href="https://www.csdndoc.com/tag/%e5%af%b9%e8%b1%a1" class="tag-cloud-link tag-link-175 tag-link-position-11" style="font-size: 14.208695652174pt;" aria-label="对象 (830个项目)">对象</a> <a href="https://www.csdndoc.com/tag/%e5%b1%9e%e6%80%a7" class="tag-cloud-link tag-link-468 tag-link-position-12" style="font-size: 9.5826086956522pt;" aria-label="属性 (344个项目)">属性</a> <a href="https://www.csdndoc.com/tag/%e5%ba%94%e7%94%a8%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-39 tag-link-position-13" style="font-size: 10.434782608696pt;" aria-label="应用程序 (407个项目)">应用程序</a> <a href="https://www.csdndoc.com/tag/%e6%89%8b%e6%9c%ba" class="tag-cloud-link tag-link-28 tag-link-position-14" style="font-size: 9.9478260869565pt;" aria-label="手机 (374个项目)">手机</a> <a href="https://www.csdndoc.com/tag/%e6%8c%87%e9%92%88" class="tag-cloud-link tag-link-849 tag-link-position-15" style="font-size: 8.1217391304348pt;" aria-label="指针 (262个项目)">指针</a> <a href="https://www.csdndoc.com/tag/%e6%8e%a5%e5%8f%a3" class="tag-cloud-link tag-link-110 tag-link-position-16" style="font-size: 10.313043478261pt;" aria-label="接口 (399个项目)">接口</a> <a href="https://www.csdndoc.com/tag/%e6%8f%92%e5%85%a5%e5%9b%be%e7%89%87" class="tag-cloud-link tag-link-336 tag-link-position-17" style="font-size: 16.765217391304pt;" aria-label="插入图片 (1,344个项目)">插入图片</a> <a href="https://www.csdndoc.com/tag/%e6%93%8d%e4%bd%9c" class="tag-cloud-link tag-link-179 tag-link-position-18" style="font-size: 9.8260869565217pt;" aria-label="操作 (365个项目)">操作</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae" class="tag-cloud-link tag-link-97 tag-link-position-19" style="font-size: 17.860869565217pt;" aria-label="数据 (1,654个项目)">数据</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e6%8d%ae%e5%ba%93" class="tag-cloud-link tag-link-92 tag-link-position-20" style="font-size: 9.4608695652174pt;" aria-label="数据库 (336个项目)">数据库</a> <a href="https://www.csdndoc.com/tag/%e6%95%b0%e7%bb%84" class="tag-cloud-link tag-link-671 tag-link-position-21" style="font-size: 13.113043478261pt;" aria-label="数组 (669个项目)">数组</a> <a href="https://www.csdndoc.com/tag/%e6%96%87%e4%bb%b6" class="tag-cloud-link tag-link-109 tag-link-position-22" style="font-size: 15.791304347826pt;" aria-label="文件 (1,118个项目)">文件</a> <a href="https://www.csdndoc.com/tag/%e6%96%b9%e6%b3%95" class="tag-cloud-link tag-link-112 tag-link-position-23" style="font-size: 15.304347826087pt;" aria-label="方法 (1,030个项目)">方法</a> <a href="https://www.csdndoc.com/tag/%e6%97%b6%e9%97%b4" class="tag-cloud-link tag-link-21 tag-link-position-24" style="font-size: 8.3652173913043pt;" aria-label="时间 (275个项目)">时间</a> <a href="https://www.csdndoc.com/tag/%e6%a8%a1%e5%9e%8b" class="tag-cloud-link tag-link-49 tag-link-position-25" style="font-size: 8.1217391304348pt;" aria-label="模型 (262个项目)">模型</a> <a href="https://www.csdndoc.com/tag/%e7%89%88%e6%9c%ac" class="tag-cloud-link tag-link-15 tag-link-position-26" style="font-size: 9.095652173913pt;" aria-label="版本 (315个项目)">版本</a> <a href="https://www.csdndoc.com/tag/%e7%94%a8%e6%88%b7" class="tag-cloud-link tag-link-100 tag-link-position-27" style="font-size: 15.182608695652pt;" aria-label="用户 (1,002个项目)">用户</a> <a href="https://www.csdndoc.com/tag/%e7%94%b5%e8%84%91" class="tag-cloud-link tag-link-564 tag-link-position-28" style="font-size: 9.704347826087pt;" aria-label="电脑 (351个项目)">电脑</a> <a href="https://www.csdndoc.com/tag/%e7%9a%84%e6%98%af" class="tag-cloud-link tag-link-41 tag-link-position-29" style="font-size: 8.2434782608696pt;" aria-label="的是 (271个项目)">的是</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-102 tag-link-position-30" style="font-size: 22pt;" aria-label="程序 (3,671个项目)">程序</a> <a href="https://www.csdndoc.com/tag/%e7%a8%8b%e5%ba%8f%e5%91%98" class="tag-cloud-link tag-link-58 tag-link-position-31" style="font-size: 11.165217391304pt;" aria-label="程序员 (471个项目)">程序员</a> <a href="https://www.csdndoc.com/tag/%e7%ae%97%e6%b3%95" class="tag-cloud-link tag-link-225 tag-link-position-32" style="font-size: 8.4869565217391pt;" aria-label="算法 (284个项目)">算法</a> <a href="https://www.csdndoc.com/tag/%e7%b1%bb%e5%9e%8b" class="tag-cloud-link tag-link-273 tag-link-position-33" style="font-size: 8.8521739130435pt;" aria-label="类型 (299个项目)">类型</a> <a href="https://www.csdndoc.com/tag/%e7%b3%bb%e7%bb%9f" class="tag-cloud-link tag-link-138 tag-link-position-34" style="font-size: 10.55652173913pt;" aria-label="系统 (417个项目)">系统</a> <a href="https://www.csdndoc.com/tag/%e7%ba%bf%e7%a8%8b" class="tag-cloud-link tag-link-463 tag-link-position-35" style="font-size: 11.895652173913pt;" aria-label="线程 (532个项目)">线程</a> <a href="https://www.csdndoc.com/tag/%e7%bb%84%e4%bb%b6" class="tag-cloud-link tag-link-523 tag-link-position-36" style="font-size: 10.8pt;" aria-label="组件 (438个项目)">组件</a> <a href="https://www.csdndoc.com/tag/%e8%87%aa%e5%b7%b1%e7%9a%84" class="tag-cloud-link tag-link-5 tag-link-position-37" style="font-size: 14.695652173913pt;" aria-label="自己的 (911个项目)">自己的</a> <a href="https://www.csdndoc.com/tag/%e8%8a%82%e7%82%b9" class="tag-cloud-link tag-link-676 tag-link-position-38" style="font-size: 12.382608695652pt;" aria-label="节点 (583个项目)">节点</a> <a href="https://www.csdndoc.com/tag/%e8%ae%be%e5%a4%87" class="tag-cloud-link tag-link-25 tag-link-position-39" style="font-size: 8.1217391304348pt;" aria-label="设备 (261个项目)">设备</a> <a href="https://www.csdndoc.com/tag/%e8%af%ad%e8%a8%80" class="tag-cloud-link tag-link-36 tag-link-position-40" style="font-size: 9.704347826087pt;" aria-label="语言 (353个项目)">语言</a> <a href="https://www.csdndoc.com/tag/%e8%bd%af%e4%bb%b6" class="tag-cloud-link tag-link-155 tag-link-position-41" style="font-size: 10.434782608696pt;" aria-label="软件 (402个项目)">软件</a> <a href="https://www.csdndoc.com/tag/%e9%98%9f%e5%88%97" class="tag-cloud-link tag-link-678 tag-link-position-42" style="font-size: 8pt;" aria-label="队列 (254个项目)">队列</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b5%e9%9d%a2" class="tag-cloud-link tag-link-279 tag-link-position-43" style="font-size: 9.5826086956522pt;" aria-label="页面 (348个项目)">页面</a> <a href="https://www.csdndoc.com/tag/%e9%a1%b9%e7%9b%ae" class="tag-cloud-link tag-link-82 tag-link-position-44" style="font-size: 10.191304347826pt;" aria-label="项目 (386个项目)">项目</a> <a href="https://www.csdndoc.com/tag/%e9%b8%bf%e8%92%99" class="tag-cloud-link tag-link-136 tag-link-position-45" style="font-size: 8pt;" aria-label="鸿蒙 (257个项目)">鸿蒙</a></div> </div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="https://www.csdndoc.com/wzlb/26497.html">高怀友（关于高怀友的介绍）</a></li> <li><a href="https://www.csdndoc.com/doc/15088.html">【spring authorization server系列教程】(一)入门系列，spring authorization server简介。快速构建一个授权服务器（基于最新版本0.3.0）</a></li> <li><a href="https://www.csdndoc.com/doc/10782.html">android MVP模式使用</a></li> <li><a href="https://www.csdndoc.com/doc/197.html">为什么 RxJava 有 Single / Maybe 等单发数据类型，而 Flow 没有？</a></li> <li><a href="https://www.csdndoc.com/doc/6287.html">【Linux】一文看懂多路复用IO模型（select、poll、epoll）</a></li> <li><a href="https://www.csdndoc.com/wzlb/26811.html">余生请多指教（关于余生请多指教的介绍）</a></li> <li><a href="https://www.csdndoc.com/doc/13820.html">适合小小白入门的JavaIO文章，学完即可上手</a></li> <li><a href="https://www.csdndoc.com/doc/10808.html">狂神SSM项目整合（含完整代码免费）</a></li> <li><a href="https://www.csdndoc.com/doc/11892.html">Acwing 29.删除链表中的重复值（结点）</a></li> <li><a href="https://www.csdndoc.com/doc/429.html">Log4j 漏洞最早由阿里云团队发现；HashiCorp 挂牌上市，市值 152 亿美元；Go 1.18 Beta1 发布 | 开源日报</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> Copyright © 2012 - 2024 <a href="https://www.csdndoc.com/">程序员档案馆</a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> <a href="https://beian.miit.gov.cn/" rel="external">陕ICP备05009492号</a> 声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢 本站仅为个人兴趣爱好，不接盈利性广告及商业合作 </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div>  <div id="tbox"> <a id="home" href="https://www.csdndoc.com" title="返回首页"></a> <a id="pinglun" href="#comments_box" title="前往评论"></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>