逆向工程Bootstrap菜单栏

Question

I used the website http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/ (very helpful- check it out if you haven't already) to create a responsive menubar. However, I am having trouble editing certain aspects of it because I did not create the code myself. I have attempted to reverse engineer (not sure if this term applies in coding) the code and have nine questions. Sorry for the number of questions. Feel free to only answer a few. I posted this last night but it was a mess, so reposting a more simple version.

1.) How do I set a different color for the active tab of the menu?

2.) What is a CSS selector like the following targeting?

#custom-bootstrap-menu.navbar-default .navbar-brand 

3.) Why is there a space between the ".navbar-default" and ".navbar-brand" but not with "#custom-bootstrap-menu.navbar-default" in the above code?

4.) Why is the background defined three times in code blocks like the following? Is this a backup for older browsers?

   background-color: rgba(47, 196, 116, 1);
    background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
    background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);

5.) What is the end part of the following code styling? Links that are the children of list items that are the children of class navbar-nav?

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a

6.) What is the point of setting a background color with complete transparency as done in the following code?

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(248, 248, 248, 0);

7.) Does seperating two targets with a comma simply make the code within brackets apply to both?

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {

8.) In the code above I know hover is when the user places their mouse over the element. What does focus do? The descriptions I've read are written like "when something gains focus". What exactly does gaining focus mean?

9.) When targeting navbar elements with the bootstrap class toggle does this mean that the changes are only made upon screen resize?

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus 

Relevant code is as follows:

Relevant CSS

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 15px;
    background-color: rgba(47, 196, 116, 1);
    background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
    background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(47, 196, 116, 1) 100%);
    border-width: 1px;
    border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(68, 229, 74, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(66, 165, 3, 1);
    background: -webkit-linear-gradient(top, rgba(54, 135, 2, 1) 0%, rgba(66, 165, 3, 1) 100%);
    background: linear-gradient(to bottom, rgba(54, 135, 2, 1) 0%, rgba(66, 165, 3, 1) 100%);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #42a503;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #42a503;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #42a503;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #2fc474;
}

Relevant HTML:

    <div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"><a class="navbar-brand" href="#">Brand Logo</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">
                <li><a href="#">Home</a>
                </li>
                <li><a href="/products">Products</a>
                </li>
                <li><a href="/about-us">About Us</a>
                </li>
                <li><a href="/contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Answer 1

1. The tool gives the ability to add different color to the active tab via "Active styles"
2. #custom-bootstrap-menu.navbar-default .navbar-brand will target the text "Brand" or the logo placed in this tag
3. The space means that the next element is child of the previous. When they are not separated with space this means that the two classes/ids belong to one element.
4. Yes, the first one is valid to all browsers and is back up to these browsers, which can not apply the gradient. -webkit- is needed for the webkit based browsers.
5. Yes, links that are direct children.
6. --
7. Yes
8. Focus is when the element is clicked, like when you click on input to write.

Answer 2

Let me try to answer your questions.

1.) How do I set a different color for the active tab of the menu?

There should be a class (usually .active ) that would be applied to the currently active menu item or tab. You just need to override styles for it.

2.) What is a CSS selector like the following targeting?

#custom-bootstrap-menu.navbar-default .navbar-brand

This targets all elements that have a class navbar-brand and are CHILDREN fo an element that has an id custom-bootstrap-menu AND a class navbar-default applied to it.

3.) Why is there a space between the ".navbar-default" and ".navbar-brand" but not with "#custom-bootstrap-menu.navbar-default" in the above code?

Basically, when there is a space between selectors it refers to a parent-child relationship as in #custom-bootstrap-menu.navbar-default .navbar-brand , here .navbar-brand refers to child elements of #custom-bootstrap-menu.navbar-default . Whereas when the selectors have no space, as in #custom-bootstrap-menu.navbar-default , it means an AND operation <id>and<class> in this case.

4.) Why is the background defined three times in code blocks like the following? Is this a backup for older browsers?

This is targeting different types of browsers. The WebKit-based ones like chrome and safari and others. When you see something starting with -webkit- it means we are targeting WebKit-based browsers.

5.) What is the end part of the following code styling? Links that are the children of list items that are the children of class navbar-nav?

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a

Yes. Almost correct. Just that it refers to, Links that are the immidiate children of list items that are the immidiate children of class navbar-nav`

6.) What is the point of setting a background color with complete transparency as done in the following code?

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(248, 248, 248, 0);

This is usually done when you want the font color to be fully opaque versus the background.

7.) Does seperating two targets with a comma simply make the code within brackets apply to both?

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {

Yes.That's correct. This is how you reuse CSS and apply it to various elements.

8.) In the code above I know hover is when the user places their mouse over the element. What does focus do? The descriptions I've read are written like "when something gains focus". What exactly does gaining focus mean?

The focus makes the current element active. For instance, if you are filling a form and you are typing in the first text field, then the first text field is said to have the focus or it is the element the user is interacting with. He does not necessarily have his mouse over that field, but he is interacting with it using his keyboard. Similarly, when you navigate a web page using your keyboard by hitting the Tab key multiple times, then, in reality you are shifting the focus from one element to other. However, it is an important point to note that not all HTML elements can get focus.

9.) When targeting navbar elements with the bootstrap class toggle does this mean that the changes are only made upon screen resize?

No this does not take effect on screen resize, this may mean an open-close operation, where toggle class is added or removed depending upon the state of the navbar element.

Phew! That was long. :) Hope I was able to help you understand some of this stuff.

Answer 3

Use a code inspector like firebug for Firefox or right click inspect element i Safari to se what CSS rule affects different elements. If you click on a source code element, it even shows the line number in you css file to look for the rule to change.

1. #menu-builder-navigation.navbar-default .navbar-nav>.active>a {}

2. #custom-bootstrap-menu.navbar-default .navbar-brand {} targets the element with the class "navber-brand" inside the element with id "custom-bootstrap-menu"

3. #custom-bootstrap-menu.navbar-default {} targets the element with both the ID custom-bootstrap-menu and also the class navbar-default
4. background: linear-gradient... is what is showing in modern browsers. The other is fallbacks for older browser.
5. This usually means menu level one *
6. You could change only opacity later with a simple rule, jQuery or javascript. If not you could have used background:tansparent;
7. Yes, two targets separated with a comma targets both classes.
8. focus is when the element is used or targeted for use – when you are writing in an input field it is being targeted.
9. In this example the hover and target has the same rule set. I guess the target rule set is kicking in after the element has been clicked in this case.

[edit]* The answer to no 5 was a bit inaccurate.

#custom-bootstrap-menu.navbar-default .navbar-nav li a

and

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a

usually do the same thing unless there is some other element between them like this: <li><ol><li><a href="#"></a></li></ol></li> or the menu is multilevel.

If you have a multilevel menu this css code would target the different levels:

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a (level 1)

#custom-bootstrap-menu.navbar-default .navbar-nav>li>ul>li>a (level 2)

#custom-bootstrap-menu.navbar-default .navbar-nav>li>ul>li>ul>li>a (level 3)

or

#custom-bootstrap-menu.navbar-default .navbar-nav li a (all levels)

#custom-bootstrap-menu.navbar-default .navbar-nav li ul li a (level 2 override)

#custom-bootstrap-menu.navbar-default .navbar-nav li ul li ul li a (level 3 override)