BootStrap--CSS组件--导航条(navbar)

1.基础导航条navbar navbar-default navbar-header navbar-brand nav navbar-nav
2.导航条中的表单navbar navbar-default navbar-header navbar-brand navbar-form
3.导航条中的按钮,文本,链接navbar-btn、bavbar-text、navbar-link
4.导航条中的项目进行左右浮动navbar-left、navbar-right
5.顶部固定或底部固定nacbar-fixed-top、navbar-fixed-bottom
6.响应式导航条


<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap 101 Templatetitle>

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

  head>
  <body>

      

      <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
              <a href="#" class="navbar-brand">前端a>
          div>
          <div>
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">HTMLa>li>
                  <li><a href="#">CSSa>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高级程序设计a>li>
                          <li><a href="">js设计模式a>li>
                          <li><a href="">js DOMa>li>
                      ul>
                  li>
              ul>
          div>
      nav>

      
      <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
              <a href="#" class="navbar-brand">Branda>
          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">左按钮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">右按钮button>
          form>
      nav>

      
      <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
              <a href="href-"#"" class="navbar-brand">Branda>
          div>
          <ul class="nav navbar-nav">
              <li><a href="#">Homea>li>
              <li><a href="#">Linka>li>
              <li><a href="#">Linka>li>
          ul>
          <button class="btn btn-class navbar-btn">和ul一起使用的buttonbutton>
      nav>

     
      <nav class="navbar navbar-default" role="navigation">
         <div class="container-fluid">
         <div class="navbar-header">
             <a class="navbar-brand" href="#">菜鸟教程a>
         div>
         <div>
             <p class="navbar-text">Runoob 用户登录p>
         div>
         div>
     nav>

     

    
    <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>

你可能感兴趣的:(BootStrap)