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
Category Archives: bootstrap
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/
viewport – page width in mobile devices
Basic:
|
1 |
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=1"> |
Advance:
If you want pages are resized automatically basing on browser width and without (or few) RWD scripts, “viewport” is a good solution for this. The key is how to use attribute “maximum-scale”:
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=0.8"> |
Reference:
Related CSS:
|
1 |
#header .wrapper, #content .wrapper, #footer .wrapper{max-width:100%; width:1200px; min-width:1100px;} |
References:
HTML5 Template
Bootstrap: http://getbootstrap.com
|
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 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="UTF-8"> <title>Site title</title> <!-- Bootstrap --> <link href='https://fonts.googleapis.com/css?family=Raleway:400,600' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'> <link rel=stylesheet type="text/css" href="<?=base_url()?>assets/css/bootstrap.min.css"> <link rel=stylesheet type="text/css" href="<?=base_url()?>assets/css/bootstrap-theme.min.css"> <link rel=stylesheet type="text/css" href="<?=base_url()?>assets/css/style.css"> <!-- Layout --> <link href="<?=base_url()?>assets/css/style2.min.css" rel="stylesheet" media="screen"> </head> <body> <header> <div class="container"> <img src="<?=base_url()?>assets/images/post/logo.png" class="logo"> <span>Discover Fun Places Thru New Friends</span> <img src="<?=base_url()?>assets/images/post/btn_app_download.png" class="apple-store"> </div> </header><!-- End of header --> <div id="content"> <div class="container"> content </div><!-- End of Wrapper --> </div><!-- End of content --> <footer> <div class="container"> footer </div> </footer><!-- End of footer --> <!-- JavaScript plugins (requires jQuery) --> <script src="<?=base_url()?>assets/js/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="<?=base_url()?>assets/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ }); </script> </body> </html> |
layout.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
body{font-family:Arial, Helvetica, sans-serif;} #header > .wrapper, #content > .wrapper, #footer > .wrapper{width:860px; margin:0 auto;} /* Header */ #header{height:191px;} #header > .wrapper{} #header > .wrapper > .top{height:53px;background:#dfdfdf;padding:0 58px;} #header > .wrapper > .middle{height:84px;padding:0 58px;} #header > .wrapper > .menu{height:47px; background:#d0000e;padding:0 58px;} /* Content */ #content{} /* Footer */ #footer{height:51px;} #footer > .wrapper{background:#e2e2e2; height:100%;padding:15px 58px;} |