Bootstrap practical code fragment one of _javascript tips

Title, continue to summarize their use of bootstrap problems encountered, and record the solution, hoping to help the needs of small partners.

scenario: Classic Upper and lower layout, top navigation bar fixed, bottom padding does not show scroll bar

Solution: navigation bar fixed at the top, while the body set the internal margin (padding-top), the interior margin for the navigation bar height (the default 50px, you can adjust the height), the HTML code is as follows:

<!--HTML page layout--> <div class= "Container-fluid page-wrapper" > <!--navigation bar--> <div "class=" Navbar-default navbar-fixed-top "role=" navigation "> <div class=" container "> <!--logo icon--> <div c lass= "Navbar-header" > <button type= "button" class= "Navbar-toggle collapsed" data-toggle= "collapse" data-target = "#myMenu" > <span class= "sr-only" > Toggle navigation bar </span> <span class= "Icon-bar" ></span> <spa n class= "Icon-bar" ></span> <span class= "Icon-bar" ></span> </button> <a class= "NavBar"
   -brand "href=" ">  </a> </div> <!--navigation bar Menu--> <div class= "Collapse navbar-collapse" id= "MyMenu" > <ul class= "Nav navbar-nav" > <li> A href= "index.html" style= "" > Home </a> </li> <li> <a href= "#" data-toggle= "modal"
  ; River Sites </a> </li>   <li> <a href= "#" data-toggle= "modal" > Reservoir site </a> </li> <li> <a href = "#" > Weather station point </a> </li> <li> <a href= "#" class= "Dropdown-toggle" data-toggle= "dropdown 
      "role=" button "aria-haspopup=" true "aria-expanded=" false "> Rainfall <span class=" caret "></span> </a> <ul class= "Dropdown-menu" > <li> <a data-toggle= "modal" >1 hour rainfall </a> < /li> <li> <a href= "#" >3 hour rainfall </a> </li> <li> <a HRE f= "#" >24 hours rain </a> </li> </ul> </li> </ul> <form class= "Navba R-form navbar-left "role=" Search > <div class= "Form-group" > <input type= "text" id= "DateTimePicker" class= "Form-control" placeholder= "Select Date" > </div> <button type= "button" class= "Btn Btn-default" > OK & Lt;/button> </form> </div> </div> </div> <!--map window--> <div class= "Container-fluid" id= "map" ></

 div> </div> </body>  

CSS code:

*{
margin:0;
padding:0;
border:0;
}
HTML, body{
height:100%;
width:100%;
Overflow:hidden;
}
body{
padding-top:50px
}
. page-wrapper{
margin:0;
padding:0;
height:100%;
Overflow:hidden;
}
#map {
width:100%;
height:100%;
}

Implementation effect:

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

I hope this article will help you to learn bootstrap.