Tôi đang tích hợp Phương thức của mình từ Bootstrap với một trang web khác không sử dụng nó. Tôi thấy rằng bootstrap cho phép bạn tách Javascript cho mỗi thành phần. Nhưng còn CSS thì sao? Nếu tôi liên kết đến bootstrap.css toàn bộ trang web sẽ thay đổi. Tôi chỉ muốn đủ CSS cho Modal hoạt động. (Tôi đã thử đi qua tập tin CSS và chỉ đoán những gì tôi cần, nhưng nó không hoạt động).Sử dụng * chỉ * Chế độ Bootstrap
Cập nhật lúc Bootstrap v3.2.5
Nhờ @Gruber để xác nhận tính v3.2.5.
Liên kết vẫn là here, để tùy chỉnh thiết lập như được đề cập bởi @Fisu.
Bạn cần phải chọn 4 tùy chọn, không chỉ modal như đã nêu. Bắt đầu bằng cách nhấp vào Chuyển đổi tất cả để tắt mọi thứ, sau đó chọn 4 tùy chọn này;
Buttons dưới CSS CommonClose icon dưới ComponentsComponent animations (for JS) dưới thành phần hoạt JavascriptModals dưới thành phần hoạt JavascriptĐiều này sẽ mang lại tất cả CSS mà bạn cần. Tiếp theo là các plugins phần jQuery, một lần nữa bắt đầu bằng cách chọn Chuyển đổi tất cả để biến tất cả mọi thứ ra và sau đó chỉ cần chọn hai plugins:
Modals dưới Liên kết với các thành phầnTransitions dưới kỳ diệu (cần thiết cho bất cứ loại nào ảnh động)Đó là tất cả những gì bạn cần, js (bootstrap.min.js) và css (chỉ bootstrap.css mà bạn sẽ cần sửa đổi một chút, được giải thích bên dưới). Đi tới cuối trang đó và chọn biên dịch và tải xuống để lấy gói của bạn.
Một điều cuối cùng cần lưu ý.Như @Rrrrrrrrrk đã đề cập, "Tôi thấy nó vẫn còn thêm rất nhiều sự bình thường hóa vào đầu css, nhưng có thể xóa nó một cách an toàn (từ html sang img, giữ css từ .img-responsive trở lên)."Điều này vẫn hợp lệ. Tôi cũng đã thêm các css sau để buộc một vài phong cách vào 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;}
này chỉ đảm bảo các phông chữ tương tự như phong cách phương thức độc đáo và không dùng về phong cách trang của bạn (có thể có thể được tinh chỉnh một chút hơn). Một mục cuối cùng cần lưu ý, bạn có thể rút gọn css tại thời điểm này bằng cách chạy nó qua http://cssminifier.com/. Tiết kiệm một vài KB.
Thực hiện phương thức:
tôi cũng có thể chỉ là kết thúc chuyện này đi. Tôi đang sử dụng plugin cookie vì tôi muốn cung cấp cho người dùng tùy chọn ẩn thông báo trong 14 ngày, được đặt trong mã. Dưới đây là các khối mã bạn sẽ cần:
này nên đi trong <head> của bạn tài liệu, có lẽ sau khi bất kỳ css của bạn, vì vậy ngay cả ngay trước khi kết thúc </head> thẻ sẽ làm việc.
<!-- 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 -->
này nên đi trong vòng của bạn <body>. Điều này sẽ tạo ra các phương thức và css bạn đã bao gồm sẽ ẩn nó.
<!-- 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 -->
Mã này nên đi ngay trước khi kết thúc </body> thẻ. Nó tải jQuery, bootstrap và plugin cookie tôi cần.
<!-- 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 -->
Cuối cùng, bạn sẽ muốn thêm tập lệnh này sau các plugin ở trên. Đây là một chút tùy chỉnh cho tình hình của tôi, tôi chỉ tung ra phương thức nếu không có tập hợp cookie và nếu phương thức khởi chạy đã tạo ra một chức năng, hãy nhấp vào Không hiển thị lại để tạo cookie để vô hiệu hóa khởi chạy phương thức.
<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>
Hy vọng điều này sẽ hữu ích! Chúc may mắn.
Dude. Câu trả lời tuyệt vời. – Haymaker87
Cảm ơn người đàn ông, vui vì nó đã giúp! Nếu bất cứ ai đọc điều này thấy rằng câu trả lời đã trở nên lỗi thời, hãy cho tôi biết và tôi sẽ cập nhật nó. –
Có thể nói rằng phiên bản Bootstrap 3.3.5 này vẫn hợp lệ và hoạt động hoàn hảo. Ngoài ra, hãy nhớ thêm [transitions.js] (http://getbootstrap.com/javascript/#transitions) trong thành phần plugin jQuery (dưới ** Magic **) để các hiệu ứng hoạt hình có hiệu quả. – Gruber
Chuyển đến Bootstrap customize section và chỉ chọn tùy chọn phương thức trong phần thành phần. Tải xuống tệp, mở tệp tin bootstrap.css và sao chép toàn bộ nội dung vào tệp CSS của riêng bạn.
Nếu bạn cố gắng tìm ra những phần cụ thể nào bạn cần, bạn có thể sẽ bỏ lỡ điều gì đó quan trọng, và bên cạnh đó, css phương thức của riêng nó không quá lớn.
Cập nhật: Liên kết hiện là here. Tôi tìm thấy nó vẫn còn thêm rất nhiều bình thường để bắt đầu của css, nhưng một cách an toàn có thể xóa nó (từ html để img, giữ css từ .img-đáp ứng trở đi).
Điều này gần như làm việc cho tôi. Ngoại trừ tôi đã đặt chiều rộng tùy chỉnh cho lớp .modal-dialog. Khi sử dụng bootstrap đầy đủ nó hoạt động chính xác, nhưng bằng cách sử dụng các tập tin tùy biến phương thức, một nửa của hộp thoại vẫn là kích thước mặc định. – xr280xr
Tôi đã thử lại và hoạt động. Tôi không biết điều gì đã thay đổi. – xr280xr
Liên kết hiện là [tại đây] (http://getbootstrap.com/customize/). Tôi tìm thấy nó vẫn còn thêm rất nhiều bình thường để bắt đầu của css, nhưng một cách an toàn có thể xóa nó (từ html để img, giữ css từ .img-đáp ứng trở đi). –
Ở đây bạn đi sử dụng bootstrap 3:
Sau bao gồm CSS, JS việc sử dụng là hoàn toàn giống nhau:
<!-- 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>
chính xác những gì tôi đang tìm kiếm! – Dinesh
Nếu tôi nhớ sử dụng bootstrap đúng 'less' cho biểu định kiểu để tạo. Vì vậy, tôi phải dễ dàng tiền tố tất cả các quy tắc với một ví dụ '.my-project' mà bạn thêm vào vùng chứa xung quanh. Hoặc bạn sử dụng hộp cát 'iframe' nếu đây là một tùy chọn, với giới hạn rằng khu vực nơi các phần tử của bạn hiển thị được giới hạn ở thứ nguyên của' iframe' –
Tôi có thể làm cho nó hoạt động ở đây. Bạn phải chọn Component JS Modal và Plugin JQuery Modal. http://twitter.github.io/bootstrap/customize.html – mdundas
thx T. tôi thích ý tưởng của bạn về hộp cát iFrame ...sẽ làm điều này nếu tôi gặp phải các vấn đề khác ... – mdundas