bootstrap_下拉菜单+头部

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery-1.11.3.min.js">script>
    <script src="js/bootstrap.js">script>

    <style>
        #login{ 
            width:400px;
        }
    style>
head>
<body>
<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown
        <span class="caret">span>
        button>
        <ul class="dropdown-menu">
        <li><a href="#">Actiona>li>
        <li><a href="#">Another actiona>li>
        <li><a href="#">Something else herea>li>
        <li><a href="#">Separated linka>li>
        ul>
    div>
div>
<br>
<br>
<div class="container">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#">onea>li>
        <li><a href="#">twoa>li>
        <li><a href="#">threea>li>
    ul>
    <br>
    <ul class="nav nav-tabs" style="width:400px;">
        <li class="active"><a href="#">onea>li>
        <li><a href="#">twoa>li>
        <li><a href="#">threea>li>
    ul>
    <br>
    <ul class="nav nav-tabs nav-justified" style="width:400px;">
        <li class="active"><a href="#">onea>li>
        <li><a href="#">twoa>li>
        <li><a href="#">threea>li>
    ul>
    <br>
    <ul class="nav nav-tabs nav-tabs-justified">
        <li class="active"><a href="#">onea>li>
        <li><a href="#">twoa>li>
        <li><a href="#">threea>li>
    ul>
    <br>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">onea>li>
        <li><a href="#">twoa>li>
        <li><a href="#">threea>li>
    ul>
div>
body>
<script>
    /*
         下拉菜单
             属性
                 — data-*
                 — aria-*
                 — rolr
                 open                显示下拉菜单
                 dropdown-menu-right   下拉菜单右浮动
                 dropdown-header   下拉头部
                 divider  分割线
        标签页
            头部
                — nav
                — nav-tabs 不适合竖状展示
                — nav-justified 端点对齐
                — nav-tabs-justified 
                — nav-pills 圆角
                — nav-stacked 竖状菜单
                — 带下拉菜单的头部
                
     */
script>

 

转载于:https://www.cnblogs.com/xiaozhishang/p/5280434.html

你可能感兴趣的:(bootstrap_下拉菜单+头部)