bootstrap嵌套模式_了解Bootstrap模式

bootstrap嵌套模式

In this tutorial, we’ll be talking about one of the most useful jQuery Bootstrap plugins, the Bootstrap Modal. Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that’s customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap-based websites can use Bootstrap modals to showcase, for example, terms and conditions (as part of a signup process), videos (similar to a standard light box), or even social media widgets.

在本教程中，我们将讨论最有用的jQuery Bootstrap插件之一，即Bootstrap Modal 。 Bootstrap Modals提供了可自定义且响应Swift的轻量级多功能JavaScript弹出窗口。 它们可用于显示网站中的警报弹出窗口，视频和图像。 基于Bootstrap的网站可以使用Bootstrap模式来展示例如条款和条件(作为注册过程的一部分)，视频(类似于标准灯箱)，甚至是社交媒体小部件。

Now let’s examine the different parts of Bootstrap Modals, so we can understand them better.

现在让我们检查Bootstrap模式的不同部分，以便我们更好地理解它们。

Bootstrap Modals are divided into three primary sections: the header, body, and footer. Each has its own role and hence should be used accordingly. We’ll discuss these shortly. The most exciting thing about Bootstrap modals? You don’t have to write a single line of JavaScript to use them! All the code and styles are predefined by Bootstrap. All that’s required is that you use the proper markup and attributes and they just work.

引导程序模式分为三个主要部分：页眉，正文和页脚。 每个都有自己的作用，因此应相应使用。 我们将在短期内讨论这些。 Bootstrap模态最令人兴奋的事情是？ 您无需编写任何JavaScript代码即可使用它们！ 所有代码和样式都是由Bootstrap预先定义的。 所需要的只是使用正确的标记和属性，它们就可以正常工作。

默认模态 (The Default Modal)

The default Bootstrap Modal looks like this:

默认的Bootstrap Modal如下所示：

To trigger the modal, you’ll need to include a link or a button. The markup for the trigger element might look like this:

要触发模式，您需要包括链接或按钮。 触发器元素的标记可能如下所示：

<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">
  Click to open Modal
</a>

Notice the link element has two custom data attributes: data-toggle and data-target. The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an ID of “basicModal” will appear.

注意，link元素具有两个自定义数据属性： data-toggle和data-target 。 切换开关告诉Bootstrap做什么，而目标告诉Bootstrap哪个元素要打开。 因此，每当单击这样的链接时，都会显示ID为“ basicModal”的模式。

Now let’s see the code required to define the modal itself. Here’s the markup:

现在，让我们来看一下定义模态本身所需的代码。 这是标记：

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Basic Modal </h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h3>Modal Body</h3>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The parent div of the modal should have the same ID as used in the trigger element above. In our case, it would be id="basicModal".

模态的父div应该具有与上述触发元素中使用的ID相同的ID。 在我们的情况下，它将为id="basicModal" 。

Note: Custom attributes like aria-labelledby and aria-hidden in the parent modal element are used for accessibility. It’s good practice to make your website accessible to all, so you should include these attributes since they won’t negatively affect the standard functionality of the modal.

注意：父模态元素中的自定义属性(例如aria-labelledby和aria-hidden用于可访问性。 最好使所有人都可以访问您的网站，因此，应包括这些属性，因为它们不会对模式的标准功能产生负面影响。

In the modal’s HTML, we can see a wrapper div nested inside the parent modal div. This div has a class of modal-content that tells bootstrap.js where to look for the contents of the modal. Inside this div, we need to place the three sections I mentioned earlier: the header, body, and footer.

在模态HTML，我们可以看到一个包装div嵌套在父模式里div 。 这个div有一个modal-content类，它告诉bootstrap.js在哪里寻找模态内容。 在此div内部，我们需要放置我之前提到的三个部分：页眉，正文和页脚。

The modal header, as the name implies, is used to give the modal a title and some other elements like the “x” close button. This should have a data-dismiss attribute that tells Bootstrap to remove the element.

顾名思义，模态标题用于为模态赋予标题和其他一些元素，例如“ x”关闭按钮。 它应该具有一个data-dismiss属性，该属性告诉Bootstrap删除该元素。

Then we have the modal body, a sibling div of the modal header. Consider the body an open canvas to play with. You can add any kind of data inside the body, including a YouTube video embed, an image, or just about anything else.

然后，我们有了模态主体，即模态标题的同级div 。 考虑一下身体是一块开放的画布。 您可以在体内添加任何类型的数据，包括嵌入的YouTube视频，图像或几乎所有其他内容。

Lastly, we have the modal footer. This area is by default right aligned. In this area you could place action buttons like “Save”, “Close”, “Accept”, etc., that are associated with the action the modal is displaying.

最后，我们有模态页脚。 默认情况下，此区域右对齐。 在该区域中，您可以放置​​动作按钮，如“保存”，“关闭”，“接受”等，这些动作按钮与模式显示的动作相关联。

Now we’re done with our first modal! You can check it out on our demo page.

现在，我们完成了第一个模态！ 您可以在我们的演示页面上查看 。

改变模态的大小 (Changing the Modal’s Size)

Earlier I mentioned that the Bootstrap Modal is responsive and flexible.

之前我提到过，Bootstrap Modal具有响应性和灵活性。

The modal comes in two flavors: Large and Small. Add a modifier class modal-lg to the .modal-dialog div for a larger modal or modal-sm for a smaller modal.

模态有两种口味：大和小。 向.modal-dialog div添加修饰符类modal-lg以获取较大的模态，或将modal-sm较小的模态。

用jQuery激活Bootstrap模式 (Activating Bootstrap Modals with jQuery)

The modal is a jQuery plugin, so if you want to control the modal using jQuery, you need to call the .modal() function on the modal’s selector. For Example:

模态是jQuery插件，因此，如果要使用jQuery控制模态，则需要在模态选择器上调用.modal()函数。 例如：

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

The “options” here would be a JavaScript object that can be passed to customize the behavior. For example:

这里的“选项”将是一个JavaScript对象，可以将其传递给自定义行为。 例如：

var options = {
  'backdrop' : 'static'
}

Available options include:

可用的选项包括：

• backdrop: This can be either true or static. This defines whether or not you want the user to be able to close the modal by clicking the background.

  背景 ：可以为true或static 。 这定义了是否希望用户能够通过单击背景来关闭模式。

• keyboard: if set to true the modal will close via the ESC key.

  键盘 ：如果设置为true则模态将通过ESC键关闭。

• show: used for opening and closing the modal. It can be either true or false.

  show ：用于打开和关闭模态。 它可以是true或false 。

• focus: puts the focus on the modal when initialized. It can be either true or false and is set to false by default.

  focus ：初始化时将焦点放在模式上。 它可以为true或false，默认情况下设置为false 。

自举模式事件 (Bootstrap Modal Events)

You can further customize the normal behavior of the Bootstrap Modal by using various events that are triggered while opening and closing the modal. These events have to be bound using jQuery’s .on() method.

您可以使用打开和关闭模式时触发的各种事件来进一步自定义Bootstrap模式的正常行为。 这些事件必须使用jQuery的.on()方法进行绑定。

Various events available are:

可用的各种事件有：

• show.bs.modal: fired just before the modal is open.

  show.bs.modal ：在打开模式之前触发。

• shown.bs.modal: fired after the modal is shown.

  shown.bs.modal ：显示模态后触发。

• hide.bs.modal: fired just before the modal is hidden.

  hide.bs.modal ：在隐藏模式之前触发。

• hidden.bs.modal: fired after the modal is closed.

  hidden.bs.modal ：关闭模态后触发。

You can use one of the above events like this:

您可以使用上述事件之一：

$('#basicModal').on('shown.bs.modal', function (e) {
  alert('Modal is successfully shown!');
});

结论 (Conclusion)

The modal is one of the best plugins offered by Bootstrap. For a novice designer, it’s one of the best ways to load content inside a popup screen without writing any JavaScript.

modal是Bootstrap提供的最好的插件之一。 对于新手设计师而言，这是在不编写任何JavaScript的情况下将内容加载到弹出屏幕中的最佳方法之一。

Below is a CodePen demo with three example Bootstrap modals.

下面是一个带有三个示例Bootstrap模态的CodePen演示。

See the Pen Bootstrap 3.1.0 Modal Demos by SitePoint (@SitePoint) on CodePen.

请参阅CodePen上的SitePoint ( @SitePoint )的Pen Bootstrap 3.1.0模式演示 。

If you’re building a site with Bootstrap that requires a login portal, check out our Creating a Login Portal with Bootstrap 4 course, which helps you get to grips with cards, forms, buttons and grids.

如果您要使用Bootstrap构建需要登录门户的网站，请查看我们的使用Bootstrap 4创建登录门户课程，该课程可帮助您掌握卡片，表单，按钮和网格。

翻译自: https://www.sitepoint.com/understanding-bootstrap-modals/

bootstrap嵌套模式