码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 导航 标题栏

时间:2015-10-17 14:53:29      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

Bootstrap 导航 标题栏:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body style="margin:50px 0">
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
        <ul class="nav nav-pills">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
    </div>
    <nav class=‘navbar navbar-default‘>asdf</nav>
    <nav class=‘navbar navbar-inverse‘>asdf</nav>
    <nav class=‘navbar navbar-default‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
        </div>
    </nav>
    <nav class=‘navbar navbar-default‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="">001</a>
                </li>
                <li><a href="">002</a>
                </li>
                <li class="disabled"><a href="">003</a>
                </li>
                <li><a href="">004</a>
                </li>
            </ul>
        </div>
    </nav>
    <nav class=‘navbar navbar-default navbar-fixed-top‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <form action="" class="navbar-form navbar-right">
                <input type="text" class="form-control">
            </form>
            <button class="btn btn-default navbar-btn">button</button>
        </div>
    </nav>
    <nav class=‘navbar navbar-default navbar-fixed-bottom‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <form action="" class="navbar-form navbar-right">
                <input type="text" class="form-control">
            </form>
            <button class="btn btn-default navbar-btn">button</button>
        </div>
    </nav>
    <nav class=‘navbar navbar-default navbar-static-tops‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <form action="" class="navbar-form navbar-right">
                <input type="text" class="form-control">
            </form>
            <button class="btn btn-default navbar-btn">button</button>
        </div>
    </nav>
    <p>001</p>
    <p>002</p>
    <p>003</p>
    <p>004</p>
    <p>005</p>
    <p>006</p>
    <p>007</p>
    <p>008</p>
    <p>009</p>
    <p>010</p>
    <p>011</p>
    <p>012</p>
    <p>013</p>
    <p>014</p>
    <p>015</p>
    <p>016</p>
    <p>017</p>
    <p>018</p>
    <p>019</p>
</body>

</html>

 

Bootstrap 导航 标题栏

标签:

原文地址:http://www.cnblogs.com/stono/p/4887396.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!