Home>

The navbar is a separate component in bootstrap.There is a clear difference between navbar and nav in bootstrap.There is a background color in the navigation bar (navbar), and the navigation bar can be pure links, forms, and forms combined with navigation and other forms.

1.Combat 1Navigation bar with secondary menus and forms

<! Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Navigation bar</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!-Css style->
 <style>
 body {margin:30px;padding:30px;}
 </style>
</head>
<body>
<div role="navigation">
 <!-The title is achieved by "navbar-header" and "navbar-brand"->
 <div>
 <a href="##">Title</a>
 </div>
 <ul>
 <li><a href="##">Home</a></li>
 <li>
 <a href="##" data-toggle="dropdown">Blog<span></span></a>
 <!-Secondary menu->
 <ul>
 <li><a href="##">Secondary menu</a></li>
 </ul>
 </li>
 <li><a href="##">Forum</a></li>
 </ul>
 <!-Form->
 <form action="##" rol="search">
 <div>
 <input type="text" placeholder="Please enter keywords" />
 </div>
 <button type="submit">Search</button>
 </form>
</div>
<!-Placed at the end of the document,Make pages load faster->
<!-If i want to use bootstrap's js plugin, you must first call into jquery->
<script src="http://libs.google.com/jquery/1.9.0/jquery.min.js"></script>
<!-Including all bootstrap js plugins or js plugins that can be used as needed->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

In addition to using the a element in navbar-brand and the ul and navbar-form of navbar-nav in bootstrap's navigation bar, other elements can also be used:

1) Button navbar-btn in the navigation bar

2) navbar-text in the navigation bar

3) The normal link navbar-link in the navigation bar

2.Combat 2-Fixed navigation bar

<!-Top navigation bar->
<div role="navigation">
 <div>
 <a href="##">Title</a>
 </div>
  <ul>
  <li><a href="##">Home</a></li>
  <li><a href="##">Blog</a></li>
  <li><a href="##">Forum</a></li>
  </ul>
</div>
<!-Bottom navigation bar>
<div role="navigation">
 <div>
 <a href="##">Title</a>
 </div>
  <ul>
  <li><a href="##">Home</a></li>
  <li><a href="##">Blog</a></li>
  <li><a href="##">Forum</a></li>
  </ul>
</div>
<!-Body content->
<div>page body content</div>

3. Practice III-Responsive navigation bar

Sometimes it is necessary to reverse the color,bootstrap provides an inverse navigation bar for this,Just change the navbar-deafult class name to navbar-inverse, and then the background color of the navigation bar and the color of the text will be modified.

4. Practice 4-Page navigation

1) Pagination navigation with page numbers

<!-Pagination:normal size
 pagination-lg:Make pagination navigation bigger
 pagination-sm:Make pagination navigation smaller->
<ul>
 <li><a href="#">«Home</a></li>
 <li><a href="#">1</a></li>
 <li><a href="#">2</a></li>
 <!-Current status>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <!-Disabled state>
 <li><a href="#">Last page»</a></li>
</ul>

2) page-by-page navigation

<ul>
 <li><a href="#">«Previous page</a></li>
 <!-Disabled state>
 <li><a href="#">Next»</a></li>
</ul>
<!-Align left and right->
<ul>
 <li><a href="#">«Previous page</a></li>
 <li><a href="#">Next»</a></li>
</ul>

5. Combat 5-label

In some web pages, a tag is often added to tell the user some additional information.E.g:

This effect is extracted into a label component in bootstrap.And implement the ".label" style for highlighting.Similar to the button element button, the label style also provides multiple colors,The background color and text color are mainly modified by these class names:

6. Combat 6-badge

Badges are used to remind you of the need for unread messages.In bootstrap, use the "badge" style to achieve the badge effect.

<!-Navbar-default navigation bar medal->
<div role="navigation">
 <div>
 <a href="##">Title</a>
 </div>
 <ul>
  <li><a href="##">Home</a></li>
  <li><a href="##">Blog</a></li>
  <li><a href="##">Forum<span>10</span>
  <li><a href="##">Feedback</a></li>
 </ul>
</div>

7. Combat 7-Pop-up box with animated transition

<! Doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>Animated Crossover Pop-up Box</title>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 <!-Css style->
 <style>
  body {margin:30px;padding:30px;}
 </style>
</head>
<body>
<button type="button">Click Me</button>
<div>
 <div>
  <div>
   <div>
    <button type="button" data-dismiss="modal">
     <span aria-hidden="true">×</span><span>close</span>
    </button>
    <h4>popup title</h4>
   </div>
   <div>
    <p>Popup body content</p>
   </div>
   <div>
    <button type="button" data-dismiss="modal">close</button>
    <button type="button">Save</button>
   </div>
  </div><!-/.Modal-content->
 </div><!-/.Modal-dialog->
</div><!-/.Modal->
<!-Placed at the end of the document,Make pages load faster->
<!-If i want to use bootstrap's js plugin, you must first call into jquery->
<script src="http://libs.google.com/jquery/1.9.0/jquery.min.js"></script>
<!-Including all bootstrap js plugins or js plugins that can be used as needed->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
 $(function () {
  $(". btn"). click (function () {
   $("#mymodal"). modal ("toggle");
  });
 });
</script>
</body>
</html>
  • Previous ThinkPHP framework implements data addition, deletion and modification
  • Next PHP implements a method for reorganizing a two-dimensional array of MySQL duplicate IDs into a three-dimensional array