zoukankan      html  css  js  c++  java
  • 导航bootstrap

    <!DOCTYPE html>
    <html lang="zh-cn">
      <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 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
          .container{
            border: 1px solid #ccc;
          }
        </style>
      </head>
      <body>
        <div>
      <!-- 标签页 -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 -->
            <li role="presentation"><a href="#">Profile</a></li>
            <!-- 带下拉菜单的标签页 -->
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown">Messages
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">Profile</a>
                </li>
                <li role="presentation"><a href="#">Prsdsig</a>
                </li>
                <li role="presentation" class="divider"></li>
                <li role="presentation" class="disabled"><a href="#">Pdddffe</a>
                </li>
              </ul><!-- dropdown-menu -->
            </li><!-- dropdown -->
          </ul><!-- nav nav-tabs -->
        <br>
      <!-- 胶囊式标签页 须使用 .nav-pills-->
          <ul class="nav nav-pills" role="tablist">
            <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 -->
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">fasfafa</a></li>
          </ul>
        <br>
      <!-- 胶囊是标签页垂直方向堆叠排列的只需添加 .nav-stacked  -->
          <ul class="nav nav-pills nav-stacked" role="tablist">
            <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 -->
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">fasfafa</a></li>
          </ul>
        <br>
        <!-- 两端对齐的标签页 只需添加 .nav-stacked -->
          <ul class="nav nav-pills nav-justified" role="tablist">
            <li role="presentation" class="active"><a href="#">Home</a></li><!-- active选择链接 -->
            <li role="presentation"><a href="#">Profile</a></li>
            <li role="presentation"><a href="#">fasfafa</a></li>
          </ul>
        </div>
    
    <br>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
  • 相关阅读:
    JSON的在javascript中的常用方法
    JUQERY判断变量是数组还是对象
    JS正则表达式大全
    jquery对事件的监听方法addEventListener()
    Hive安装(二)之表不见了
    Hive安装(一)之环境配置
    Java锁(一)之内存模型
    遗传算法(二)之组卷算法
    Ubuntu 14 Trusty安装hue
    算法(三)粒子群算法之算法分类
  • 原文地址:https://www.cnblogs.com/xiaoyumi666/p/6082381.html
Copyright © 2011-2022 走看看