Bootstrap Learning-Menu-Button-Navigation

1. Drop-down menu (basic usage)

When using the pull-down menu Bootstrap framework, it must call the Bootstrap framework provided by the bootstrap.jsfile. Of course, if you are using a non-compiled version, in js folder you can find a named dropdown.jsfile. You can also call this js file. When using the drop-down menu component in the Bootstrap framework, the correct use of its structure is very important. If the structure and class name are not used correctly, it will directly affect whether the component can be used normally.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        …
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div>

2. Drop-down menu (principle analysis)

Bootstrap framework drop-down menu component, its drop-down menu item is hidden by default, because dropdown-menuthe default style set display:none, when the user clicks on the parent menu item, the drop-down menu will be displayed when the user clicks again, the drop-down menu will continue to hide . Now let's analyze the implementation principle is very simple, js through technical means, to the parent container div.dropdownto add or remove a class name opento control drop-down menu to show or hide. That is, by default, div.dropdownno class name open, when the user first clicks, div.dropdownwill add the class name open; when the user clicks again, div.dropdownthe container class name openwill be removed.

3. Drop-down menu (drop-down divider)

Drop-down menu Bootstrap framework also provides a separation line pull-down, pull-down menu has assumed two groups, by adding a blank between the group and that group &lt;li&gt;, and to this &lt;li&gt;was added the name of the class dividerto implement the function of adding the pull-down separation line.

4. Drop-down menu (menu title)

By adding a dividerpull-down menu can be grouped, in order to make the grouping more obvious, you can also add a header (title) to each group.

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        …
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
        …
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div

5. Drop-down menu (alignment)

Bootstrap framework drop-down menu default is left-aligned, if you want the drop-down menu right-aligned relative to the parent container, you can dropdown-menuadd one pull-rightor dropdown-menu-rightclass name. Also be sure to to .dropdownadd float:leftcss styles.

.dropdown{
  float: left;
}

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
      下拉菜单
      <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
   …
  </ul>
</div>

6. Drop-down menu (menu item status)

The default state of the drop-down menu item (without setting) has the floating state ( :hover) and the focus state ( :focus). In addition to the above two states, the drop-down menu item also has the current state ( .active) and the disabled state ( .disabled).

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
      下拉菜单
      <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    ….
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

7. Button (button group)

Buttons and drop-down menu component group, need to rely on the button.jsplugin to run. But we can also directly call only bootstrap.jsfile. Because this file has integrated button.jsplug-in function. For the structure, it is very simple. Using a named btn-groupcontainer, the plurality of buttons into the container. In addition to use &lt;button&gt;than the elements, elements other labels may be used, such as &lt;a&gt;labels. The only guarantee is: no matter what label is used .btn-group, the label element in the container needs to have a class name .btn.

<div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button>
   …
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>
glyphicon glyphicon-search
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-download
glyphicon glyphicon-upload

8. Button (button toolbar)

So Bootstrap framework button on the toolbar also provides such production methods, you only need to button group btn-groupby group in a large container btn-toolbar, the container is designed to allow realization of the principle of multiple packets btn-groupelements float, and the group remains with the group before 5pxLeft margin. Introducing a button, the button is we know through btn-lg, btn-smand btn-xsthree to adjust the class name padding, font-size, line-heightand border-radiusproperty values change button size. Then the size of the button group, we can also use a similar method.

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>

9. Buttons (nested grouping)

Many times, we often arrange drop-down menus and ordinary button groups together to achieve an effect similar to navigation menus. When in use, just need to make the drop-down menu of the original dropdownvessel replaced btn-group, and normal button on the same level. 

<div class="btn-group">
    <button class="btnbtn-default" type="button">首页</button>
    <button class="btnbtn-default" type="button">产品展示</button>
    <button class="btnbtn-default" type="button">案例分析</button>
    <button class="btnbtn-default" type="button">联系我们</button>
    <div class="btn-group">
        <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="##">公司简介</a></li>
            <li><a href="##">企业文化</a></li>
            <li><a href="##">组织结构</a></li>
            <li><a href="##">客服服务</a></li>
        </ul>
    </div>
</div>

10. Buttons (vertical grouping)

In actual use, you will always encounter the effect of vertical display. This style is also provided in the Bootstrap framework. We just need to level grouping of btn-groupthe class name changed btn-group-verticalto.

11. Button (Equal division button)

The effect of the equal division button is particularly practical on the mobile terminal. The width of the entire button group is 100% of the container, and each button in the button group equally divides the entire container width. For example, if there are five buttons in your button group, then each button is 20% wide, if there are four buttons, then each button is 25% wide, and so on. Aliquots button also often referred adaptive grouping button, its implementation is very simple, just set the button btn-groupis added on a btn-group-justifiedclass name, the principle is very simple to achieve, the btn-group-justifiedanalog form as ( display:table), and the inside of the button Simulate as a table cell ( display:table-cell). In the production decile groups of buttons to make use of &lt;a&gt;the label element to create a button, because the use of &lt;button&gt;the label elements, using display:tablein part browser does not support friendly.

<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
        <a class="btnbtn-default" href="#">首页</a>
        <a class="btnbtn-default" href="#">产品展示</a>
        <a class="btnbtn-default" href="#">案例分析</a>
        <a class="btnbtn-default" href="#">联系我们</a>
    </div>
</div>

12. Button drop-down menu

Button drop-down menu is actually a common drop-down menu, but the &lt;a&gt;label element into the &lt;button&gt;label element. The only difference is that the outer container div.dropdownreplaced div.btn-group.

<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
      </ul>
</div>

13. The downward and upward triangle of the button

Down triangle button, we are by &lt;button&gt;adding a tag &lt;span&gt;label element, and the name caret, sometimes we drop down menu will pop up (the next section will introduce a), this time we need the direction of the triangle facing up display, implementation: the need in .btn-groupclass on an additional dropupclass name (which is the name of the class to do pop up the drop-down menu to use).

14. Drop-down menu that pops up

Some menus need to pop up. For example, your menu is at the bottom of the page, and this menu happens to have a drop-down menu. In order to give users a better experience, the drop-down menu has to pop up. In the Bootstrap framework, a class name is specially provided for this effect dropup. Usage As previously shown, only need to btn-groupadd the name of the class (of course, if an ordinary pop-up drop-down menu, you only need dropdownan additional class name based on the dropupclass name).

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>

15. Navigation (basic style)

Making navigation bar Bootstrap framework, mainly through .navstyle. The default .navstyle does not provide a default navigation style, you must attach another style to be effective, for example nav-tabs, nav-pillsand the like.

16. Navigation (tab navigation)

Tabbed navigation, also known as tab navigation. Especially when a lot of content is displayed in blocks, it is very suitable to use this tab to group. Navigation through the tab-shaped nav-tabsachieved style. In the original need to navigate in the production of label-shaped navigation navappend these names on, in fact, the effect on patients and we usually see tab effect is not the same. Under normal circumstances, the tab church has a currently selected item. In fact, it is also provided in the Bootstrap framework. Suppose we want the Homeentries for the currently selected item, just add the class name on its label class="active"can be. In addition to the current item, the card also comes with some options disabled, to achieve this effect, just add the label on the item class="disabled"can be.

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
    …
</ul>

17. Navigation (capsule-shaped pills navigation)

Pills navigation sounds a bit awkward because it looks a bit like a capsule. But it is more like the mass navigation that we usually see. The current item is highlighted with rounded corners. This is accomplished and nav-tabsthe like, the same configuration, only the name of the class should nav-tabsbe replaced nav-pillsto.

<ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
</ul>

18. Navigation (vertically stacked navigation)

In actual use, in addition to horizontal navigation, there is also vertical navigation, which is similar to the vertical arrangement of buttons described earlier. Production vertically stacked navigation only need nav-pillsto add a base nav-stackedclass name.

<ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

19. Adaptive navigation (use)

Adaptive navigation means that the navigation occupies the entire width of the container, and the menu items can adapt to the width just like the cells of the table. And adaptive navigation previously used btn-group-justifiedproduction adaptive button group are the same. It's just that another class name was changed when making adaptive navigation nav-justified. And of course he needs nav-tabsor nav-pillsfit together.

<ul class="nav nav-tabs nav-justified">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

20. Adaptive navigation (implementation principle)

The realization principle is not difficult &lt;ul&gt;. Set the width on the list ( ) to 100%, and then set each menu item ( &lt;li&gt;) display:table-cellto display the list items in the form of simulated table cells.

21. Navigation plus drop-down menu (secondary navigation)

The previous introduction is to use the Bootstrap framework to make the first-level navigation, but in many cases, the effect of the second-level navigation is inseparable from the Web page. Then it is easier to make secondary navigation in the Bootstrap framework. Just want lias a parent container, class name dropdown, while linest another list ul, use the drop-down menu approach described earlier can be.

<ul class="nav nav-pills">
     <li class="active"><a href="##">首页</a></li>
     <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            …
       </ul>
     </li>
     <li><a href="##">关于我们</a></li>
</ul>

22, breadcrumb navigation

Breadcrumb is generally used for navigation, and its main function is to tell the user where the page is currently (current location).

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

appendix

Read the original text:https://blog.mazey.net/1962.html

Guess you like

Origin blog.51cto.com/mazey/2641810