BOOTSTRAP--CSS Components--navigation bar (NavBar)

Source: Internet
Author: User
Tags min


1. Base navigation bar NavBar Navbar-default Navbar-header Navbar-brand nav navbar-nav
2. Forms in the navigation bar NavBar Navbar-default Navbar-header Navbar-brand navbar-form
3. Buttons, text, links navbar-btn, Bavbar-text, Navbar-link
4 in the navigation bar. Items in the navigation bar are floating navbar-left, Navbar-right
5. Top fixed or bottom fixed nacbar-fixed-top, Navbar-fixed-bottom
6. Responsive navigation bar


<! DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE = edge">
    <!-Bootstrap fully supports mobile platforms from version 3.0 and implements mobile-first principles->
    <meta name = "viewport" content = "width = device-width, initial-scale = 1">

    <title> Bootstrap 101 Template </ title>

    <!-Bootstrap->
    <link href = "bootstrap-3.3.7-dist / css / bootstrap.min.css" rel = "stylesheet">

  </ head>
  <body>

      <!-Basic navigation bar navbar navbar-default navbar-header navbar-brand nav navbar-nav
            To create a default navigation bar:
            1.Add class .navbar, .navbar-default to the <nav> tag
            2. Add role = "navigation" to the above elements to help increase accessibility.
            3. Add a header class .navbar-header to the <div> element, which contains a <a> element with a class navbar-brand. This makes the text look bigger.
            4. To add a link to the navigation bar, simply add an unordered list with class .nav, .navbar-nav->

      <nav class = "navbar navbar-default" role = "navigation">
          <div class = "navbar-header">
              <a href="#" class="navbar-brand"> Front end </a>
          </ div>
          <div>
              <ul class = "nav navbar-nav">
                  <li class = "active"> <a href="#"> HTML </a> </ li>
                  <li> <a href="#"> CSS </a> </ li>
                  <li class = "dropdown">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#"> JS <span class = "caret"> </ span> </a>
                      <ul class = "dropdown-menu">
                          <li> <a href=""> js advanced programming </a> </ li>
                          <li> <a href=""> js design pattern </a> </ li>
                          <li> <a href=""> js DOM </a> </ li>
                      </ ul>
                  </ li>
              </ ul>
          </ div>
      </ nav>

      <!-Navbar navbar-default navbar-header navbar-brand navbar-form
            Proceed as follows:
            1.Add class .navbar, .navbar-default to the <nav> tag
            2. Add role = "navigation" to the above elements to help increase accessibility.
            3. Add a header class .navbar-header to the <div> element, which contains a <a> element with a class navbar-brand. This makes the text look bigger.
            4. Place the form element in the navbar container, and apply the navbar-form style on the form element. Colleagues navbar-left and navbar-right are available->
      <nav class = "navbar navbar-default" role = "navigation">
          <div class = "navbar-header">
              <a href="#" class="navbar-brand"> Brand </a>
          </ div>
          <form role = "search" class = "navbar-form navbar-left">
             <div class = "form-group">
                 <input type = "text" class = "form-control">
             </ div>
             <button class = "btn btn-default" type = "button"> Left button </ button>
          </ form>

          <form role = "search" class = "navbar-form navbar-right">
             <div class = "form-group">
                 <input type = "text" class = "form-control">
             </ div>
             <button class = "btn btn-default" type = "button"> Right Button </ button>
          </ form>
      </ nav>

      <!-Buttons, text, links in the navigation bar:
            Navbar-brand style a element in ordinary navigation bar
            Also: navbar-btn, bavbar-text, navbar-link (these symbolically set margins and colors)->
      <nav class = "navbar navbar-default" role = "navigation">
          <div class = "navbar-header">
              <a href="href-"#"" class="navbar-brand"> Brand </a>
          </ div>
          <ul class = "nav navbar-nav">
              <li> <a href="#"> Home </a> </ li>
              <li> <a href="#"> Link </a> </ li>
              <li> <a href="#"> Link </a> </ li>
          </ ul>
          <button class = "btn btn-class navbar-btn"> button used with ul </ button>
      </ nav>

     <!-Text in the navigation bar:
           If you need to include text strings in your navigation, use class .navbar-text->
      <nav class = "navbar navbar-default" role = "navigation">
         <div class = "container-fluid">
         <div class = "navbar-header">
             <a class="navbar-brand" href="#"> Rookie tutorial </a>
         </ div>
         <div>
             <p class = "navbar-text"> Runoob user login </ p>
         </ div>
         </ div>
     </ nav>

     <!-Responsive navigation bar:
           A navigation bar is 100% full screen by default, so there are usually many menus, but it may not be displayed on a small screen.
           Usually need to hide or remove part of the menu content according to the size. ->

    <!-bootstrap is based on jQuery->
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </ script>
    <script src = "bootstrap-3.3.7-dist / js / bootstrap.min.js"> </ script>
  </ body>
</ html> 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.