• 导航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>
  • 相关阅读:
    CentOS6.5系统服务
    Linux下查看文件内容时去掉空行和#开头的注释行
    sql去重复(RecordNum )
    bootstrap-fileinput使用
    javascript事件失效l
    vs2015里,发布OSGI.NET
    视频允许播放禁止下载
    zTree模糊查询人员姓名:getNodesByParamFuzzy
    OSGI.NET,请求因HTTP状态404 失败:Not Found
    异常
  • 原文地址:https://www.cnblogs.com/xiaoyumi666/p/6082381.html
Copyright © 2020-2023  润新知