CSS 使用 just Bootstrap 模式

Question

提问by mdundas

I'm integrating my Modal from Bootstrap with another site that doesn't use it. I see that bootstrap lets you separate the Javascript for each component. But what about the CSS? If I link to bootstrap.css the whole site will change. I just want enough CSS for the Modal to work. (I tried going thru the CSS file and just guessing what I needed, but it didn't work).

我正在将 Bootstrap 中的 Modal 与另一个不使用它的站点集成。我看到引导程序可以让您为每个组件分离 Javascript。但是 CSS 呢？如果我链接到 bootstrap.css，整个站点都会改变。我只想要足够的 CSS 来让 Modal 工作。（我尝试通过 CSS 文件并猜测我需要什么，但它没有用）。

Answer 1

回答by Tony M

Update as of Bootstrap v3.2.5

更新自 Bootstrap v3.2.5

Thanks to @Gruber for confirmation as of v3.2.5.

感谢@Gruber 从 v3.2.5 开始确认。

The link is still here, to customize the setup as mentioned by @Fisu.

该链接仍然在这里，用于自定义@Fisu 提到的设置。

You need to select 4 options though, not just modalas stated. Start by clicking Toggle All to turn everything off, then select these 4 options;

不过，您需要选择 4 个选项，而不只是modal如所述。首先单击“全部切换”以关闭所有内容，然后选择这 4 个选项；

Buttonsunder Common CSS
Close iconunder Components
Component animations (for JS)under JavaScript components
Modalsunder JavaScript components

Buttons在通用 CSS 下
Close icon在组件下
Component animations (for JS)在JavaScript 组件下
Modals在JavaScript 组件下

This should bring all of the CSS over that you'll need. Next is the jQuery plugins section, again start by selecting Toggle All to turn everything off and then just select two plugins:

这应该会带来您需要的所有 CSS。接下来是 jQuery 插件部分，再次开始选择 Toggle All 关闭所有内容，然后只选择两个插件：

Modalsunder Linked to components
Transitionsunder Magic(required for any kind of animations)

Modals在链接到组件下
Transitions在Magic下（任何类型的动画都需要）

That's all you'll need, js (bootstrap.min.js) and css (only bootstrap.csswhich you'll need to modify a bit, explained below). Go to the bottom of that page and select compile and downloadto grab your package.

这就是你所需要的全部，js ( bootstrap.min.js) 和 css （bootstrap.css你只需要稍微修改一下，下面解释）。转到该页面的底部并选择编译和下载以获取您的软件包。

One final thing to note. As @Rrrrrrrrrk mentioned, "I found it still added a lot of normalization to the start of the css, but could safely delete it (from html to img, keeping the css from .img-responsive onwards)."This is still valid.I also added the following css to force a few styles into the Modals:

最后要注意的一件事。正如@Rrrrrrrrrk 提到的，“我发现它仍然在 css 的开头添加了很多规范化，但可以安全地删除它（从 html 到 img，保持 css 从 .img-responsive 开始）。” 这仍然有效。我还添加了以下 css 以强制将一些样式添加到 Modals 中：

.modal { font-family:Arial,Helvetica,sans-serif!important}
.modal p {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}

This just ensures fonts are similar to the original modal styling and don't take on your pages styles (could probably be tweaked a bit more). One final item to note, you could minify the css at this point by running it through http://cssminifier.com/. Saves a few KB.

这只是确保字体与原始模态样式相似，并且不会采用您的页面样式（可能会进行更多调整）。最后要注意的一项是，此时您可以通过http://cssminifier.com/运行它来缩小 css 。节省了几 KB。

Implementing the Modal:

实现模态：

I might as well just finish this off. I'm using a cookie plugin because I want to give my users an option to hide the message for 14 days, which is set in the code. Here are the code blocks you'll need:

我不妨把这件事做完。我正在使用 cookie 插件，因为我想让我的用户选择将消息隐藏 14 天，这是在代码中设置的。以下是您需要的代码块：

This should go in the <head>of you document, probably after any of your css, so even just before the ending </head>tag will work.

这应该放在<head>你的文档中，可能在你的任何 css 之后，所以即使在结束</head>标签之前也可以工作。

<!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css">

<!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

This should go within your <body>. This will create the modal and the css you've included will hide it.

这应该在您的<body>. 这将创建模态，您包含的 css 将隐藏它。

<!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" 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" id="important-msg-label">Message Title!</h4>
          </div>
          <div class="modal-body">
            <p>Message text</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button>
          </div>
        </div>
      </div>
    </div>

<!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

This code should go just before the ending </body>tag. It loads jQuery, bootstrap, and the cookie plugin I need.

此代码应位于结束</body>标记之前。它加载 jQuery、引导程序和我需要的 cookie 插件。

<!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest jQuery (1.11.1) -->
    <script src="modalsonly/js/jquery-1.11.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="modalsonly/js/bootstrap-3.2.0.min.js"></script>    

    <!-- jQuery Cookie -->
    <script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script>

<!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

Finally, you'll want to add this script after the plugins above. This is a bit customized to my situation, I'm only launching the modal if there is no cookie set, and if the modal launches created a function to click Don't Show Again which creates the cookie to disable the launch of the modal.

最后，您需要在上述插件之后添加此脚本。这对我的情况有点定制，如果没有设置 cookie，我只会启动模态，并且如果模态启动创建了一个函数来单击不再显示，这将创建 cookie 以禁用模态的启动。

<script>
    //Start the DOM ready
    $( document ).ready(function() {


        //CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP

            //Check to see if the cookie exists for the Don't show again option
            if (!$.cookie('focusmsg')) {
                //Launch the modal when you first visit the site            
                $('#important-msg').modal('show');
            }

            //Don't show again mouse click
            $("#dont-show-again").click( function() {

                //Create a cookie that lasts 14 days
                $.cookie('focusmsg', '1', { expires: 14 });     
                $('#important-msg').modal('hide');      

            }); //end the click function for don't show again

        //END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP


    }); //End the DOM ready
</script>

Hope this helps! Good luck.

希望这可以帮助！祝你好运。

Answer 2

回答by Fisu

Go to the Bootstrap customize sectionand select just the modal option in the components section. Download the file, open the bootstrap.cssfile and copy the entire contents into your own CSS file.

转到Bootstrap 自定义部分，然后在组件部分中仅选择模态选项。下载文件，打开bootstrap.css文件并将整个内容复制到您自己的 CSS 文件中。

If you try to work out which specific parts you need you'll likely miss something important, and besides, the modal css on its own is not too big.

如果你试图找出你需要的特定部分，你可能会错过一些重要的东西，此外，模态 css 本身并不太大。

Update: The link is now here. I found it still added a lot of normalization to the start of the css, but could safely delete it (from html to img, keeping the css from .img-responsive onwards).

更新：链接现在在这里。我发现它仍然在 css 的开头添加了很多规范化，但可以安全地删除它（从 html 到 img，保持 css 从 .img-responsive 开始）。

Answer 3

回答by Shlomi Hassid

Here you go using bootstrap 3:

在这里，您可以使用引导程序 3：

JSnippet DEMO and Source code

JSnippet 演示和源代码

Source code in a github gist

github gist 中的源代码

After including the CSS, JS the usage is exactly the same:

加入CSS后，JS的用法完全一样：

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <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">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </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>

CSS 使用 just Bootstrap 模式

提问by mdundas

回答by Tony M

回答by Fisu

回答by Shlomi Hassid

相关推荐

最近更新

标签

CSS 使用 *just* Bootstrap 模式

提问by mdundas

回答by Tony M

回答by Fisu

回答by Shlomi Hassid

相关推荐

CSS 如何从接收焦点的 jQuery Mobile 输入元素中移除蓝色光晕

CSS 如何使选择元素在 Chrome 中透明？

我可以为 css 写一个循环吗

CSS 从特定锚标记中删除下划线

相关推荐

最近更新

标签

CSS 使用 just Bootstrap 模式