Home  >  Article  >  Web Front-end  >  What is the use of bootstrap modal box?

What is the use of bootstrap modal box?

(*-*)浩
(*-*)浩Original
2019-07-10 14:21:412406browse

Bootstrap Modals (modal boxes) are created using custom Jquery plug-ins.

What is the use of bootstrap modal box?

It can be used to create modal windows to enrich the user experience, or to add practical functions to users. You can use Popovers and Tooltips with Modals. (Recommended learning: Bootstrap video tutorial)

will discuss how to use Bootstrap to create a modal window through some examples and explanations. We will also discuss the various options available for customization.

You need Jquery, Bootstrap CSS and the JavaScript file bootstrap-modal.js. This js file is located in the js folder in the main folder of the Bootstrap download you made.

Jquery is located in your Bootstrap home folder under docs > assets > js and is named jquery.js. Or you can directly visit https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js to download Jquery.

What does Bootstrap Modals (modal box) look like

The following example demonstrates what Bootstrap Modals (modal box) looks like.

What is the use of bootstrap modal box?

Use Bootstrap Modals (modal boxes) in your website

The following example demonstrates how to use it in a web page Bootstrap Modals. Note that you don't need to write any JavaScript code.

<div>
    <h2>使用Bootstrap创建模态框</h2>
    <div>
        <div>
            <a>×</a>
            <h3>这是一个模态框标题</h3>
        </div>
        <div>
            <h4>模态框中的文本</h4>
            <p>你可以在这添加一些文本。</p>
        </div>
        <div>
            <a>唤醒活动</a>
            <a>关闭</a>
        </div>
    </div>
    <p><a>发动演示模态框</a></p>
</div>
<script></script>
<script></script>

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of What is the use of bootstrap modal box?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn