Change to bundle version:
https://getbootstrap.com/docs/4.5/getting-started/introduction/#bundle
Don’t include popper.js seperatedly.
Category Archives: bootstrap
Order Box Layout in Modal
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
<div id="md_member_info" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Member Info</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="modal-container"> <!-- Personal Information --> <div class="order-info-box"> <div class="row order-info-header"> <h5>Personal Information</h5> <hr> </div> <div class="row"> <div class="col-xs-6"> <label class="pw-capitalize"> First Name </label> Chen </div> <div class="col-xs-6"> <label class="pw-capitalize"> Last Name </label> Dant </div> </div> <div class="row"> <div class="col-xs-6"> <label> Phone Number </label> 969612648 </div> <div class="col-xs-6"> <label class="pw-capitalize"> Email </label> a0956276177@gmail.com </div> </div> </div> <!-- Purchase Details --> <div class="order-info-box margin-top-15"> <div class="row order-info-header"> <h5>Purchase Details</h5> <hr> </div> <div class="col s12"> <table class="table table-bordered"> <thead> <tr> <th> Amount </th> <th> <span class="pw-capitalize">Total price</span> </th> </tr> </thead> <tbody> <tr> <td> 2.10 USD </td> <td> <b> 2.10 USD </b> </td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary btn-xsm" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
SCSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.modal-container{ padding: 20px; } .pw-capitalize{ text-transform: capitalize; } .order-info-box{ width: 100%; font-size: 1.2em; .row{ margin-bottom: 20px; &:after{ content: ""; display: table; clear: both; } label{ display: block; font-size: 0.9rem; color: #9e9e9e; line-height: 1rem; margin-bottom: 0; } } .order-info-header{ position: relative; margin-bottom: 10px; box-sizing: border-box; h5{ position: relative; z-index: 1; background: white; font-size: 14px; font-weight: 600; color: #4a4a4a; margin: 0; padding: 0 4px 0 10px; float: left; } hr{ position: absolute; z-index: 0; width: 98%; background-color: #ccc7c7; height: 2px; border: 0; opacity: 0.5; margin: 10px; } } } |
Popper.js with Bootstrap
popper.js v2.0 not compatible with bootstrap v4. Use v1.0 instead.
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.map
Popper.js official
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Popper must included before bootstrap.min.js --> <script src="{{ASSETS_FRONT}}js/jquery-1.12.4.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js.map"></script> <script src="{{ASSETS_FRONT}}js/bootstrap.min.js"></script> <script> $(document).ready(function() { $('[data-toggle="popover"]').popover(); }); </script> |
Customize Bootstrap SCSS
Install bootstrap source
|
1 |
npm install bootstrap |
Import bootstrap in SCSS
|
1 2 3 4 |
// Your variable overrides $blue: #3c8dbc; @import "../../node_modules/bootstrap/scss/bootstrap"; |
Reference:
Select2 doesn’t work in bootstrap modal
You can type anything in search box if you put a select2 element in modal.
Solution: Remove tabindex=”-1″ from modal HTML.
Reference:
Boostrap Navbar Example
- Include jQuery
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script> - Include boostrap
http://getbootstrap.com/getting-started/#download
HTML Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">RIMBI</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <!--li class="active"><a href="#">Home</a></li--> <li><a href="#about">85%覆膜酵母</a></li> <li><a href="#contact">堅持把簡單的事做到最好</a></li> <li><a href="#contact">專業醫美醫師的建議</a></li> <li><a href="#contact">FB社團連三高</a></li> <li><a href="#contact">時尚美妝部落客強力推薦</a></li> <li><a href="#contact">萬名網友見證</a></li> <li><a href="#contact">韓妞蛋白肌的秘密</a></li> <li><a href="#contact">超值優惠</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> |
Keep navbar as collapsed for all screen sizes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@media (max-width: 2000px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .collapse.in{ display:block !important; } } |
Customization:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//Nav $nav-blue: #00AFCC; $nav-dark-blue: #00A9C5; .navbar-inverse{ background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%); background-color: $nav-dark-blue; border-color: $nav-dark-blue; .container{ padding-right: 15px; padding-left: 15px; .navbar-toggle{ border-color: #FFF; &:focus, &:hover{ background-color: $blue; } } .navbar-brand{ color: #FFF; } .navbar-collapse, .navbar-form{ border-color: #FFF; } .navbar-nav>li>a{ color: #FFF; } .navbar-nav>.active>a, .navbar-nav>.open>a{ background-image: linear-gradient(to bottom,$nav-blue 0,$nav-blue 100%); } } } |
Bootbox – Easy to use modal in bootstrap
http://bootboxjs.com/#examples
|
1 2 3 |
$('#myModal').on('shown.bs.modal', function (e) { //Do something }); |
Popover Handling
This example will trigger a popover when a link is clicked and dismiss automatically in 3 seconds.
|
1 |
|
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function toggle_popover(selector){ var $item = $(selector); if($('div.popover').size() > 0){ close_popover(selector); }else{ $item.popover({ content: 'Under construction', container: 'body', placement: 'bottom', trigger: 'manual' }).popover('show'); $('div.popover').css({'z-index': 9999}); //Optional setTimeout("close_popover('" + selector + "')", 3000); } } function close_popover(selector){ $(selector).popover('hide').popover('destroy'); } |
Remove All Effects from Input Text (Bootstrap3)
|
1 |
|
|
1 |
.form-control:focus{outline: none;border-color:transparent;box-shadow:none;} |
Weird Space of list-inline
Set font-size of parent element 0 works.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/