Little bootstrap knowledge, little bootstrap knowledge

Little bootstrap knowledge, little bootstrap knowledge

At the end of the year, there was no project to do. I sorted out the bootstrap knowledge recently used by my website.

I. Import bootstrap styles and scripts

    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />    <script src="js/bootstrap.min.js" type="text/javascript"></script>

Ii. navigation bar

<Div class = "navbar-fixed-top"> <div class = "navbar-inner"> <div class = "container"> <a class = "brand pull-left "href =" # "> RenderKa </a> <a class =" btn-navbar "data-toggle =" collapse "data-target = ". nav-collapse "> <span class =" icon-bar "> </span> <span class =" icon-bar "> </span> <span class =" icon- bar "> </span> </a> <div class =" nav-collapse "> <div class =" icon_home "> <a href =" Index. aspx "target =" _ blank "> CN </a>/EN </div> <ul id =" nav-list "class =" nav pull-right "> <li> <a href = "# price"> Price </a> </li> <a href = "# support"> Support </a> </li> <li> <a href = "# workflow"> Workflow </a> </li> <a href = "# contact"> Contact </a> </ li> </ul> </div>View Code

1. navbar classAdd class. Navbar-fixed-top: indicates to pin the navigation bar to the top of the page.

2.. brand class: displayed in different ways

3.. pull-left: Align to the left

4,To add responsive features to the navigation bar, the content you want to collapse must be wrapped in. Collapse,. Navbar-collapseIn <div>. The collapsed navigation bar is actually a class. Navbar-toggleAnd two data-element buttons. The first one isData-toggleTo tell JavaScript what to do with the button. The second isData-targetIndicates the element to switch. Three. Icon-bar<Span> Create a hamburger button. These will be switched. Nav-collapse<Div>.

3. layout containers

<Div class = "container-fluid"> <div class = "row-fluid" id = "workflow">

1. container class:Containers with fixed width and responsive layout supported

2. container-fluid:Container used for the 100%-width, occupying all the viewports

3. Up to 12 spans in one row

4. Rolling monitoring

1. Introduce js: <script src = "js/bootstrap-scrollspy.js" type = "text/javascript"> </script>

2. (1) Add to the element you want to listen to (usually the body)Data-spy = "scroll ",Then add the ID of the parent element with the Bootstrap. nav component or the attribute data-target of the class.

(2)

$("#nav-list li, #scroll_up").click(function(e) {        e.preventDefault();         $('html, body').animate({                scrollTop: $($(this).children("a").attr("href")).offset().top         },1500);    });