Code for the header navigation of common bootstrap components and the bootstrap navigation

Code for the header navigation of common bootstrap components and the bootstrap navigation

The following is the code for the header navigation. I will briefly explain some common attributes.

Total effect:

The Code is as follows:

<Nav class = "navbar-default navbar-inverse navbar-fixed-top"> // navbar-inverse sets the background // navbar-fixed-top sets the header to be fixed on the top, therefore, you need to set the top padding for the body, which is usually set to padding-top: 60px <div class = "Container-fluid"> // container-fluid specifies whether the content of the navigation bar has a certain inner spacing. If class = "container-fluid", no inner spacing exists, keep the content close to the left. // If class = "container" is set, the content has a certain padding and the content is symmetric and centered. <! -- Brand and toggle get grouped for better mobile display --> <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> // here is the response method, on a small screen Three-shot display, no need to change <a class = "navbar-brand" href = "#" rel = "external nofollow" rel = "external nofollow"> a Management System </a> </div> <! -- Collect the nav links, forms, and other content for toggling --> <div class = "collapse navbar-collapse" id = "bs-example-navbar-collapse-1"> <ul class = "nav navbar-nav"> <li class = "active "> <a href =" # "rel =" external nofollow "=" external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofollow" rel = "external nofollow"> homepage <span Class = "sr-only"> (current) </span> </a> </li> <li class = "dropdown"> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" class = "dropdown- toggle "data-toggle =" dropdown "role =" button "aria-haspopup =" true "aria-expanded =" false "> function <span class =" caret "> </ sp An> </a> <ul class = "dropdown-menu"> <li class = "dropdown-header"> business functions </li> <a href =" # "rel =" external nofollow "rel =" external nofollow "rel = "external nofollow" rel = "external nofollow"> information creation </a> </li> <a href = "#" rel = "external nofollow" rel =" external nofollow "rel =" external nofollow "rel =" external n Ofollow "rel =" external nofollow "rel =" external nofollow "> Information Query </a> </li> <li> <a href = "#" rel = "external nofollow" rel =" external nofollow "rel =" external nofollow "rel =" external nofollow "> information management </a> </li> <li role =" separator "class =" divider "> </li> <li class = "dro Pdown-header "> system functions </li> <a href =" # "rel =" external nofollow "rel = "external nofollow" rel = "external nofollow"> Settings </a> </li> <li role = "separator" class = "divider"> </li> </ul> </li> <a href = "#" rel = "external nofollow" rel = "external nofollow" rel = "external nofollow" rel = "extern Al nofollow "rel =" external nofollow "rel =" external nofollow "> help </a> </li> </ul> <form class = "navbar-form navbar-left pull-right"> <div class = "form-group"> <input type = "text" class = "form-control "placeholder =" username... "> <input type =" password "class =" form-control "placeholder =" password... "> </div> <button type =" submit "class =" btn-default "> Login </Button> </form> </div> <! --/. Navbar-collapse --> </div> <! --/. Container-fluid --> </nav>