bootstrap修改功能_Bootstrap 3简洁：更改了JavaScript功能

最新推荐文章于 2022-04-08 20:05:35 发布

daique1908

最新推荐文章于 2022-04-08 20:05:35 发布

阅读量325

点赞数

文章标签： java python javascript css html ViewUI

bootstrap修改功能

谈到BS3中JavaScript时，并没有太大变化。到目前为止，我们看到的绝大多数更改都围绕CSS和组件部分进行。这是有原因的。

BS2的大多数（以及BS3的）JavaScript功能都以数据属性的形式出现。在大多数情况下，我们已经在组件的各个部分中看到了如何使用它们，实际上只剩下很少的特定于JavaScript的内容。

因此，在本教程中，我将简要介绍所有可用的内容，并且在本系列中其他地方没有其他描述的地方，显示有关如何使用可用API的简短示例。

BS2和BS3中可用的JS功能非常可扩展，即使是完整的教程系列也可能无法涵盖所有可能的内容。因此，我强烈建议您访问Bootstrap网站并通读JavaScript一节。

模态

在Bootstrap中出现JavaScript主题时，任何人提到的第一件事就是模式对话框，这并不奇怪。

BS3的模式框是任何现代浏览器HTML5框架中最简单的实现之一（也是最丰富的实现之一）。

使用它们很容易，但是不幸的是，确实需要很多标记。

以下代码为您提供了一个非常基本的示例：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Show Modal Dialog
</button>

<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 title</h4>
      </div>
      <div class="modal-body">Modal Body</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Some Action</button>
      </div>
    </div>
  </div>
</div>

为了显示模态，首先需要有一个触发目标。在上面的示例中，这是标记为Show Modal Dialog的按钮。为了使触发器动作起作用，它必须分配有一个切换和目标数据属性，并且该切换必须具有值“ modal ”以表明它以模式对话框为目标。必须为目标分配最外面的<div>的ID选择器。

在此示例中，最外面的<div>具有ID="myModal" ，这意味着target的data属性应将#myModal作为其值。

您的触发器不必一定是按钮。只要提供了toggle和target数据属性，它可以是任何可以接受（或设置为接受）鼠标单击的东西。

一旦进入模态本身，您将看到该结构由许多深度嵌套的<div> 。由于存在此嵌套，建议您创建对话框/模式定义并将其放置在尽可能靠近主体根的位置。如果您不这样做，那么其他组件和HTML结构可能会导致您没有想到的布局问题。

您还会注意到，再次有一个共同的主题，即标记事物以使其对屏幕阅读器友好，而我再强调不过了：您应尽一切努力确保标记对辅助工具。

模态以外部<div>开头，并对其应用类modal 。（可选）您还可以添加fade ，这将在显示和隐藏时为模式提供良好的平滑过渡。外部的<div>应该是您要设置Z-Order以及您要进行全局模态自定义的任何方式的对象。

下一个<div>应该添加了一个modal-dialog类。然后，该<div>后面应紧跟第三个<div> ，并为其分配modal-content类。在第三个<div>内部，您实际放置了模态内容定义。

定义了模态内容外壳后，可以将其放置在具有以下类的另外三个<div>元素中： modal-header ， modal-body和modal-footer 。这三个内部部分不应嵌套，而应作为彼此的同级添加到标记中，并用于定义对话框的三个主要部分的内容。

您可以从上面的示例代码中看到，我们包括一个闭合十字形，就像我们对警报框所做的那样。此结束叉号与我们之前看到的叉号之间的唯一区别是dismiss data属性的值为modal而不是alert 。置于内部模式标记内且具有此数据属性（具有此值）的任何可单击元素，在单击时将关闭对话框。

除了关闭图标，模式的其余内部内容只是普通的BS3标记和CSS。您可以在其他任何地方使用的任何东西都可以在模式内部使用，如果它对于屏幕而言太高，您将获得一个内部容器，该容器会自动切换到可滚动元素。

还有两个可选的宽度大小；这些被添加到内部modal-dialog <div> ，分别是modal-lg和modal-sm 。大尺寸类将模式的宽度扩展到屏幕宽度的一半（对于表和列表是理想的），而小尺寸类将默认宽度收缩到其原始大小的一半左右（对于是/否提示是理想的）。

您还可以使用JavaScript API以标准jQuery方式初始化模式。如果要更改默认选项的行为，则使用JQ构造函数是唯一的方法。

$('#myModal').modal({
  backdrop: true/false,
  keyboard: true/false,
  show: true/false,
  remote: 'path to url that returns content'
});

可以更改的选项如下：

backdrop:布尔值true或false，以在显示模式时在页面上包括或不包括阴影背景；如果指定了static值，则显示背景，但单击时不会关闭模式，如使用true时那样。
keyboard:布尔值true或false；允许或不允许使用退出键关闭模式。
show:布尔值true或false，在初始化对话框后立即自动显示或不显示该对话框。
remote:包含用于获取对话框主体内部内容的url的字符串；如果提供了此选项，则对话框将要求url提供要在模式主体中使用HTML块。

对于某些操作，还会引发许多事件，但是这些事件不在本教程的讨论范围之内。

要标记一组使用JavaScript自动更改的选项卡，首先需要以与导航组件部分中所示的相同方式创建<ul> 。该<ul>必须在其每个<li>元素内嵌入<a>元素，并且每个锚点的href都指向每个关联的<div>的id ，以设置其可容纳选项卡面板。您还需要确保为每个锚分配了一个切换数据属性，并且其值设置为tab 。

创建导航集后，您需要创建一个外部<div>并将其tab-content分配给它。然后，在此<div>内部，您需要创建几个单独的同级<div> ，每个同级都有一个tab-pane和一个id属性，该属性与导航集中的相关选项卡匹配。（可选）还可以fade in淡入淡出的标签更改时添加fade in ，并active以标记当前显示的是哪个标签。

以下代码显示了此示例：

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <h1>We self-actualize, we believe, we are reborn</h1>
    <p>By refining, we live ...</p>
  </div>
  <div class="tab-pane" id="tab2">
    <h1>We exist as four-dimensional superstructures</h1>
    <p>Today, science tells us that the ...</p>
  </div>
  <div class="tab-pane" id="tab3">
    <h1>The goal of morphogenetic fields is to plant ...</h1>
    <p>You and I are life forms of the quantum soup ...</p>
  </div>
</div>

选项卡控件没有采用模式方式的选项的构造函数，但是它具有API调用，因此您可以知道以编程方式显示哪个选项卡。为此，您只需要使用jQuery选择适当的选择器，然后在其上调用tab('show') 。完成此操作后，您的标签页将自动使引用的标签页成为所选标签页。与模式（和其他模式）一样，当事件发生变化时，有一些事件可以告诉您。 BS3文档中提供了每个呼叫的详细信息和参数。

工具提示和弹出窗口

每个人都喜欢工具提示-简单的弹出式小标签，可用于帮助以及许多其他简单的描述性任务。

在BS3中使用工具提示非常容易。只需将带有tooltip值的toggle数据属性分配给您希望工具提示显示的任何标准HTML元素。要定义工具提示的文本，请添加包含所需文本的title属性，并根据需要选择添加数据属性（称为placement ，该数据属性包含所需的left ， top ， bottom或right值，具体取决于您希望工具提示的方向表演。

以下代码将创建一个简单的按钮，并在其顶部附加一个工具提示：

<button id="mybutton" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="I am a tooltip!!">The button with a tooltip</button>

有一个小提示适用于工具提示，但不适用于任何其他元素：您需要自己初始化工具提示。您可以同时将各种选项传递给它们（就像使用模态一样），但是必须将它们初始化，否则您的工具提示将不会出现。

要初始化上一示例中显示的按钮，请将以下JavaScript行放置在页面中的某处，以便在DOM准备就绪并创建按钮后立即运行它：

$('#mybutton').tooltip();

如何选择每个按钮完全取决于您。例如，您可以通过其元素类型全部选择它们，但是必须在每个附加了工具提示的元素上调用tooltip() 。

如果一切正常，您应该会看到以下内容：

紧靠不起眼的工具提示的后面是popover，并且像工具提示一样，必须通过调用popover()手动对其进行初始化。弹出窗口和工具提示之间的主要区别在于，弹出窗口可以容纳的内容比工具提示更多。

工具提示通常只有一个简单的单行文本，而弹出窗口较大，并且可以包含多个HTML元素，从段落到按钮和图像不等。

第二个区别是必须先单击元素，然后弹出窗口才会显示，而工具提示会在悬停时自动显示。

创建弹出框的方式与工具提示几乎相同，除了弹出内容是在名为content的数据属性内定义的，并且title属性用于为弹出框提供迷你标题区域（类似于标题区域的方式）在面板组件上使用）。以下代码显示了如何定义一个简单的弹出窗口：

<button id="mybutton" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="I am the pop over contents, and I'm awesome." title="Popover Title">
  I am a button with a pop over
</button>

与工具提示一样，在文档启动的某个位置，您还需要确保使用以下方式初始化组件：

$('#mybutton').popover();

与工具提示一样，您可以在此处传递包含选项的对象。有很多可用的内容，因此，再次鼓励您阅读BS3文档以学习所有内容。

如果一切正常，您应该可以呈现页面并看到以下内容：

可折叠面板

不幸的是，BS3中删除的一件事是现成的手风琴组件。但是，取而代之的是更好的东西：可折叠面板。

使用这些面板，创建标准的手风琴仍然一样容易，但是它们现在也是可单独使用的独立组件，允许您执行诸如创建折叠信息区域，工具栏等操作。

但是，需要注意一件事：如果要进行自定义构建，则还必须确保包括过渡帮助JavaScript插件。如果要进行自定义构建，BS3文档将提供更多信息。

要从可折叠的面板中创建一个手风琴，您只需创建一个带有panel-group类的外部<div>并为其指定一个id 。然后，在其中内部，您需要标记一系列的<div>标签，如面板组件部分中前面所述，每个面板div是一个独立的面板。

布置好面板后，只需在panel-header添加一个panel-title 。此标头应包含一个<a>标记，该标记分配了两个数据属性：一个称为data-toggle ，另一个称为data-parent 。

肘节属性应该具有的值collapse ，和父属性应持有id外的<div>保持屏基和href与id目标面板主体应该是这样的折叠行为的目的的。每个目标面板都应分配有panel-collapse和collapse类。

以下代码显示了如何实现此目的：

<div class="panel-group" id="newAccordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#newAccordion" href="#panelOne">
          Consciousness is the richness of truth, and of us
        </a>
      </h4>
    </div>
    <div id="panelOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Aromatherapy may be the solution to what's ...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#newAccordion" href="#panelTwo">
          The planet is radiating four-dimensional superstructures
        </a>
      </h4>
    </div>
    <div id="panelTwo" class="panel-collapse collapse">
      <div class="panel-body">
        It is time to take chi to the next level ...
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#newAccordion" href="#panelThree">
          Reality has always been radiating messengers whose souls are opened by stardust
        </a>
      </h4>
    </div>
    <div id="panelThree" class="panel-collapse collapse">
      <div class="panel-body">
        Self-actualization requires exploration ... 
      </div>
    </div>
  </div>
</div>

如前所述，面板不需要分组；它们可以以单个元素的形式单独使用，以作为折叠发生的触发。例如，如果要使用简单的按钮折叠面板，只需确保按钮的数据属性为toggle ，其值为collapse ；数据属性名为target ，其目标面板的选择器为其值。

轮播

为了使本教程更完整，我要介绍的最后一个JavaScript插件是新设计的轮播。 BS2有一个旋转木马，但是像手风琴一样，它现在已被删除并大大简化以使其易于使用。

通常，轮播插件用于页面顶部，以提供旋转的图像横幅，而在BS2中，这是唯一可以用于轮播的工具。但是，在BS3中，所有可以放置在轮播面板中的内容都会旋转，包括图像，文本，svg等。

以下代码显示了如何构建轮播的基本示例：

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img data-src="holder.js/1140x500/sky" />
      <div class="carousel-caption">
        <h3>You and I are beings of the planet</h3>
        <p>Spacetime is a constant. Will requires exploration</p>
      </div>
    </div>
    <div class="item">
      <img data-src="holder.js/1140x500/vine" />
      <div class="carousel-caption">
      <h3>Nothing is impossible</h3>
        <p>Stardust requires exploration. You and I are storytellers of the cosmos</p>
      </div>
    </div>
    <div class="item">
      <img data-src="holder.js/1140x500/lava" />
      <div class="carousel-caption">
        <h3>You and I are beings of the planet</h3>
        <p>Spacetime is a constant. Will requires exploration</p>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

还有一些低调JavaScript对象，但是它们大多数不能从普通用户代码中直接使用，并且通常仅在特殊情况下使用。 BS3文档涵盖了我错过的所有内容，并且如果您要深入研究可用JavaScript设施，那么一定要仔细阅读并理解所有内容如何结合在一起。

最后一点：BS3 JavaScript插件仅是常规jQuery插件（BS在后台使用jQuery）。这意味着从unheap.com之类的地方获取您最喜欢的jQuery插件并使其轻松适应BS3应当很容易。不要忘记，那里仍然有大量的附加组件，尤其是与框架一起使用的附加组件，其中大多数仅是Google搜索而已。

本教程代表了Bootstrap 3 Succinctly的一章，这是Syncfusion团队提供的免费电子书。

翻译自: https://webdesign.tutsplus.com/tutorials/bootstrap-3-succinctly-changed-javascript-features--cms-23179

bootstrap修改功能

daique1908

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap修改功能_Bootstrap 3简洁：更改了JavaScript功能

谈到BS3中JavaScript时，并没有太大变化。到目前为止，我们看到的绝大多数更改都围绕CSS和组件部分展开。这是有原因的。 BS2的大多数（以及BS3的）JavaScript功能都以数据属性的形式出现。在大多数情况下，我们已经在组件的各个部分中看到了如何使用它们，实际上只剩下很少的特定于JavaScript的内容。因此，在本教程中，我将简要介绍所有可用的内容，并且在本系列...
复制链接

扫一扫