Bootstrap Navbar Component implementation of responsive navigation _javascript techniques

Objective:

Implementation of a responsive navigation with bootstrap Navbar component

Understand how bootstrap Navbar component works (excluding collepse.js)

Know what to do when you add a defined class name

Refit according to one's own needs

Compare your own implementation to find the difference.

1. Implementation:

I want to emulate one of these response-style navigation:

After adding the class name to the rules by creating a label according to the method introduced on the bootstrap Web site, you can get a navigation like this:

Code:

<nav class= "NavBar navbar-default" >
<div class= "container" >
<div class= "Navbar-header" >
<button type= "button" class= "Navbar-toggle collapsed" data-toggle= "collapse" data-target= "# Bs-example-navbar-collapse-1 "aria-expanded=" false ">
<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" >live with it</a >
</div>
<div class= "collapse navbar-collapse" id= "bs-example-navbar-collapse-1" >
<ul class= "nav navbar-nav navbar-right" >
<li class= "active" ><a href= "#" >home</a></ li>
<li><a href= "#" >Portfolio</a></li>
<li><a href= "#" >contact </a></li>
</ul>
</div>
</div>
</nav>

2. Principle of realization:

RIP out the code associated with Nav NavBar from his source and pick out the location-related:

@media (min-width:768px) {
. navbar-header {
float:left
}}
}
. Navbar-brand {
float:left;
}
@media (min-width:768px) {
. navbar-nav {
float:left
}}
. Navbar-nav > li {
float:left;
}
}

Two key boxes, Navbar-header and Navbar-nav.

The default is the small screen, their status is:

On the big screen, the Navbar-header left float, and the Navbar-nav and the inside Li also floated left, like this:

So the idea is to control the stack and side by using block-level elements to fill a row in the document stream, and to squeeze together after floating.

So, in order to be able to become a big screen when the two boxes can be smooth to go up, that is, do not appear below the situation, you need to control the Navbar-header and Navbar-nav inside the total width of elements should not exceed 768px.

Then pick out and hide the associated styles in the appearance:

@media (min-width:768px) {
. navbar-toggle {
display:none
}}
}
. Collapse {
display:none;
}
@media (min-width:768px) {
. navbar-collapse.collapse {
display:block!important;
Height:auto!important;
Overflow:visible!important
}
}

The Navbar-collapse is the box that controls the hidden and appearing of the navigation list, and the button disappears when it becomes a large screen.

3. Figure out the style added to each class name

. NavBar is responsible for defining a strip

. navbar {
position:relative;
min-height:50px;
margin-bottom:20px;
border:1px solid transparent;
}
@media (min-width:768px) {
. navbar {
border-radius:4px
}}
}

Navbar-header, responsible for wrapping the brand and folding buttons, controlling the location of the brand and buttons on the small screen, and controlling the layout of the navigation list.

@media (min-width:768px) {
. navbar-header {
float:left
}}
}
. Container > Navbar-header,
. Container-fluid >. navbar-header {
margin-right: -15px;// Small screen when the header content left edge and container left edge alignment
margin-left: -15px;
}
@media (min-width:768px) {
. Container > Navbar-header,
. Container-fluid >. navbar-header {
margin-right:0; 
margin-left:0
}
}

. Navbar-brand, responsible for the default style of the left logo area

. navbar-brand {
float:left;
height:50px;
padding:15px 15px;
font-size:18px;
line-height:20px
}
. Navbar-brand:hover,
. navbar-brand:focus {
text-decoration:none;
}
. Navbar-brand > img {
display:block
}
@media (min-width:768px) {
. navbar > Container. Navbar-brand,
. NavBar >. container-fluid. Navbar-brand {
margin-left: -15px/* Large screen when content left edge and header left edge align * *}
}

Container and Navbar-brand all have 15px padding on both sides, so the left line of the container, header, and brand three boxes should be this way:

On a small screen, the header and left sides of each side have a negative margin, so this is the state:

Large screen, brand has a negative margin on the left:

. NAV is responsible for the style defined as vertical navigation

. nav {
padding-left:0;
margin-bottom:0;
List-style:none
}
. Nav > li {
position:relative;
Display:block
}
. Nav > li > a {
position:relative;
Display:block;
padding:10px 15px;
Nav > li > A:hover,
. Nav > li > A:focus {
text-decoration:none;
Background-color: #eee;
}

Navbar-nav: Responsible for the vertical navigation of the fill, the implementation of the horizontal version of navigation.

. navbar-nav {
margin:7.5px-15px/* Collapses to add a top and bottom margin, each row and screen equal width */
}
. navbar-nav > li > a {
padding-top:10px;
padding-bottom:10px;
line-height:20px;
}
@media (min-width:768px) {
. navbar-nav {
float:left;
margin:0
}
. Navbar-nav > Li {
float:left
}
. Navbar-nav > li > a {
padding-top:15px;
padding-bottom:15px
}
}

Navbar-right,navbar-left: Responsible for positioning

@media (min-width:768px) {
. navbar-left {
float:left!important;
}
. navbar-right {
float:right!important;
Margin-right: -15px; The first element to add Navbar-right will have a negative margin
}
. navbar-right ~. Navbar-right {//after will not have
margin-right:0;
}

Navbar-toggle: is responsible for defining the style of the button, which draws three lines with three boxes. Disappears on the big screen.

. navbar-toggle {
position:relative;
Float:right;
PADDING:9PX 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:transparent;
Background-image:none;
border:1px solid transparent;
Border-radius:4px
}
. Navbar-toggle:focus {
outline:0;
}
@media (min-width:768px) {
. navbar-toggle {
display:none
}}
}
. Navbar-toggle. icon-bar {
display:block;
width:22px;
height:2px;
border-radius:1px
}
. Navbar-toggle. Icon-bar +. Icon-bar {
margin-top:4px;
}

Collapse, responsible for controlling display and hiding

. collapse {
Display:none
}
@media (min-width:768px) {
. navbar-collapse.collapse {
display:block!important;
Height:auto!important;
padding-bottom:0;
Overflow:visible!important
}
}

. Navbar-collapse: Responsible for the style of the folded box

. navbar-collapse {
padding-right:15px;
padding-left:15px;
Overflow-x: visible;
-webkit-overflow-scrolling:touch;
border-top:1px solid transparent;
-webkit-box-shadow:inset 0 1px 0 rgba (255, 255, 255,. 1);
Box-shadow:inset 0 1px 0 rgba (255, 255, 255,. 1);
Container > Navbar-collapse,
. Container-fluid >. navbar-collapse {
margin-right: -15px;
Margin-left: -15px;
}
@media (min-width:768px) {
. navbar-collapse {
width:auto; 
border-top:0;
-webkit-box-shadow:none;
Box-shadow:none
}
}
@media (min-width:768px) {
. Container > Navbar-collapse,
. Container-fluid >. navbar-collapse {
margin-right:0;
margin-left:0
}
}

All of these categories are responsible for styles other than colors, and all color-related things are handled by. Navbar-default.

4. Modified

Now the navigation bar looks like this:

And I want to have some differences, but know how it is implemented, you can make the desired changes.

First let the small screen when the navigation list is also horizontal display, and with a certain distance to the screen:

. navbar-nav {
text-align:center
}
. Nav li {
display:inline-block
}
. NavBar {
border:0
}
. NavBar. navbar-header {
padding-top:10px;
padding-bottom:10px;
}
@media (min-width:768px) {
. navbar-collapse {
padding-top:10px;
padding-bottom:10px
}
}
. Navbar-brand {
font-size:34px;
Font-family:lobster, monospace;
Nav {
font-size:20px;
}
@media (max-width:768px) {
. container. navbar-collapse {
margin-left:12px;
margin-right:12px
}
}

(You can also define a class for him if you use this layout later)

Then define a new color scheme and replace it. Navbar-default

@media (min-width:768px) {
. navbar {
background-color: #F79C9C;
}
}
. Navbar-girl Navbar-header,
. Navbar-girl. navbar-collapse {
background-color: #F79C9C;
}
. Navbar-girl. Navbar-brand {
color: #FFF;
}
. Navbar-girl. Navbar-text {
color: #F7846B;
}
. Navbar-girl. Navbar-nav > li > A {
color: #F7846B;
}
. Navbar-girl. Navbar-nav > li > A:hover,
. navbar-girl navbar-nav > li > A:focus {
color: #CEE6E6; 
   background-color:transparent
}
. Navbar-girl. Navbar-nav > Active > A,
. Navbar-girl. Navbar-nav >. Active > A:hover,
. Navbar-girl. Navbar-nav > Active > A:focus {
color: #F7846B;
Background-color: #FFF;
Navbar-girl. Navbar-toggle {
border-color: #FFF;
}
. Navbar-girl Navbar-toggle:hover,
. Navbar-girl. Navbar-toggle:focus {
background-color: #CEE6E6;
}
. Navbar-girl. Navbar-toggle. Icon-bar {
background-color: #FFF;
}
. Navbar-girl. navbar-collapse {
border-color: #FFF;
}

It's done.

5. Reflection

Before using their own ideas to achieve a responsive navigation: Css3media Queries+jquery Implementation of response-type navigation

After contrasting with Bootstrap's thoughts, I found some of my problems

① positioning:

My idea is to control the location of the navigation list by Position:absolute. This has an obvious disadvantage that the navigation list is completely out of the ordinary stream.

The root of my thinking is that I have not grasped the nature of this change, and when I see two of the same things in different places in different situations (that is, from one place to another), the first thing I think of is to move directly past, that is, to use absolute positioning.

and bootstrap see the nature of this change, so that some block-level elements from the stacking arrangement into a horizontal arrangement (or vice versa), such changes by the use of block-level elements of the characteristics and fluctuations can be achieved.

② starting point:

The central idea of Bootstrap is: mobile first, implement the layout on the small screen, and then make some changes to achieve the layout on the big screen.

And my idea is: each layout and style are considered in both cases, contrast to see which is convenient to use which. So my code will appear @media (min-width:768px) and @media (max-width:768px) Two conditions, for a design I might default large-screen, small screen media, another design I might default to the small screen, Media for large screens.

Doing so can reduce some of the unnecessary code that is duplicated. But the disadvantages are far greater than the advantages:

① for those who write, if the logic is clear, the writing will be very smooth. If the thinking is a little bit confusing, you'll be able to get yourself in.

② for the people who look, it will be awkward to understand.

③ If you want to change a small style over a period of time, you need to understand the logic at the time.

The above is a small set to introduce the bootstrap Navbar component to achieve response-type navigation, hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!