使用 *just* Bootstrap 模式
Posted
技术标签:
【中文标题】使用 *just* Bootstrap 模式【英文标题】:How can I use Bootstrap modals without loading the entire library? 【发布时间】:2013-06-09 21:40:24 【问题描述】:我正在将 Bootstrap 中的 Modal 与另一个不使用它的网站集成。 我看到引导程序可以让您分离每个组件的 javascript。但是 CSS 呢?如果我链接到 bootstrap.css,整个网站都会改变。我只想要足够的 CSS 来让 Modal 工作。 (我尝试通过 CSS 文件,只是猜测我需要什么,但没有用)。
【问题讨论】:
如果我记得正确的引导程序使用less
来创建样式表。所以我应该很容易用例如前缀所有规则。 .my-project
添加到周围容器的类。或者,如果这是一个选项,您可以使用 iframe
沙盒,但限制是您的元素可见的区域仅限于 iframe
的尺寸
我能够从这里开始工作。您必须选择 Modal JS 组件和 Modal JQuery 插件。 twitter.github.io/bootstrap/customize.html
thx T. 我喜欢你对 iFrame 沙盒的想法...如果我遇到其他问题会这样做...
【参考方案1】:
转到Bootstrap customize section 并在组件部分中仅选择模态选项。下载文件,打开 bootstrap.css 文件并将全部内容复制到您自己的 CSS 文件中。
如果你试图找出你需要的特定部分,你可能会错过一些重要的东西,此外,模态 css 本身并不太大。
更新: 链接现在是here。我发现它仍然在 css 的开头添加了很多规范化,但可以安全地删除它(从 html 到 img,保持 css 从 .img-responsive 开始)。
【讨论】:
这几乎对我有用。除了我为 .modal-dialog 类设置了自定义宽度。使用完整引导时,它可以正常工作,但使用模式自定义文件时,对话框的一半仍然是默认大小。 我又试了一次,它成功了。我不知道发生了什么变化。 链接现在是here。我发现它仍然在 css 的开头添加了很多规范化,但可以安全地删除它(从 html 到 img,保持 css 从 .img-responsive 开始)。【参考方案2】:自 Bootstrap v3.2.5 起更新
感谢@Gruber 对 v3.2.5 的确认。
链接仍然是here,用于自定义@Fisu 提到的设置。
您需要选择 4 个选项,而不仅仅是modal
所述。首先单击 Toggle All 以关闭所有功能,然后选择这 4 个选项;
Buttons
在 Common CSS 下
组件下的Close icon
JavaScript 组件 下的Component animations (for JS)
JavaScript 组件 下的Modals
这应该会带来您需要的所有 CSS。接下来是 jQuery 插件部分,再次选择 Toggle All 以关闭所有功能,然后选择两个插件:
链接到组件下的Modals
Magic 下的Transitions
(任何类型的动画都需要)
这就是您所需要的,js (bootstrap.min.js
) 和 css(只有 bootstrap.css
需要稍作修改,如下所述)。转到该页面的底部并选择编译和下载以获取您的包。
最后要注意的一点。正如@Rrrrrrrrrk 提到的,“我发现它仍然在 css 的开头添加了很多规范化,但可以安全地删除它(从 html 到 img,保持 css 从 .img-responsive 开始)。” em> 这仍然有效。 我还添加了以下 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;
这只是确保字体与原始模态样式相似,并且不会采用您的页面样式(可能会进行更多调整)。最后一点要注意,此时您可以通过http://cssminifier.com/ 运行它来缩小css。节省了几 KB。
实现模态:
我还不如干脆结束这件事。我正在使用 cookie 插件,因为我想给我的用户一个选项来隐藏消息 14 天,这是在代码中设置的。以下是您需要的代码块:
这应该放在您文档的 <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 -->
这应该在您的 <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">×</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 -->
此代码应位于结束 </body>
标记之前。它会加载 jQuery、bootstrap 和我需要的 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 -->
最后,您需要在上述插件之后添加此脚本。这是根据我的情况定制的,如果没有设置 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>
希望这会有所帮助!祝你好运。
【讨论】:
老兄。很棒的答案。 谢谢,很高兴它有帮助!如果有人看到这篇文章的答案已经过时,请告诉我,我会更新它。 可以看出,从 Bootstrap 3.3.5 版本开始,这仍然有效并且可以正常工作。还要记得在 jQuery 插件组合(在 Magic 下)中添加 transitions.js 以使动画效果生效。 "你需要选择 4 个选项" => 你不需要。在我的情况下,Modal 只需要Less files > JavaScript components > Modal, Component animations (for JS)
和 jQuery plugins > Modals
@TonyM 你是个传奇,先生!【参考方案3】:
你可以使用 bootstrap 3:
JSnippet DEMO and Source code
Source code in a github gist
加上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">×</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>
【讨论】:
正是我想要的!【参考方案4】:仅我的 CSS+js 引导模式:
document.querySelector('.mymodalonline').onclick = function() document.querySelector('.modal').classList.toggle('open');
document.getElementById('closf').onclick = function() document.querySelector('.modal').classList.toggle('open');
.hidden
display: none;
.open
display: block!important;
.modal-open
overflow: hidden;
.modal
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
background-color: #00000063;
padding-top: 100px;
.modal-dialog
position: relative;
width: auto;
margin: 10px;
.modal-content
position: relative;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-webkit-background-clip: padding-box;
background-clip: padding-box;
outline: 0;
.modal-backdrop
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
.modal-header
padding: 15px;
border-bottom: 1px solid #e5e5e5;
min-height: 16.42857143px;
.modal-header .close
margin-top: -2px;
.modal-title
margin: 0;
line-height: 1.42857143;
.modal-body
position: relative;
padding: 15px;
.modal-footer
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
.close
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
button.close
-webkit-appearance: none;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
.close:hover, .close:focus
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
@media (min-width: 768px)
.modal-dialog
width: 600px;
margin: 30px auto;
.modal-content
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
.modal-sm
width: 300px;
@media (min-width: 992px)
.modal-lg
width: 900px;
[role="button"]
cursor: pointer;
.hide
display: none !important;
.show
display: block !important;
.invisible
visibility: hidden;
.text-hide
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
.hidden
display: none !important;
.affix
position: fixed;
<a href="#myModal" data-toggle="modal" class="mymodalonline" onclick="return false;"><span>Обратный<br>звонок</span></a>
<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
<!-- Заголовок модального окна -->
<div class="modal-header">
<button type="button" id="closf" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Заказать звонок</h4>
</div>
<!-- Основное содержимое модального окна -->
<div class="modal-body">
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8">
111
</div>
<div class="col-xs-2"></div>
</div></div>
</div>
</div>
</div>
【讨论】:
以上是关于使用 *just* Bootstrap 模式的主要内容,如果未能解决你的问题,请参考以下文章
从 Bootstrap 3 迁移到 Bootstrap 4? [关闭]
Bootstrap 不能与 spring-boot 一起使用?
Flask实战-留言板-使用Bootstrap-Flask简化页面编写