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>
  • 相关阅读:
    nginx 配置https 负载均衡
    MyCAT+MySQL搭建高可用企业级数据库集群视频课程
    Java数字签名算法--RSA
    bootstrap在iframe框架中实现由子页面在顶级页面打开模态框(modal)
    bootstrap-treeview 自定义实现双击事件
    Java多线程之内存可见性
    Java实现责任链模式
    JVM(HotSpot) 7种垃圾收集器的特点及使用场景
    jQuery的noConflict以及插件扩展
    JavaScript事件漫谈
  • 原文地址:https://www.cnblogs.com/xiaoyumi666/p/6082381.html
Copyright © 2011-2022 走看看