bootstrap【按钮、栅格、导航栏】

按钮 button

<body>
    <div class="well"> <!--Well 是一种会引起内容凹陷显示或插图效果的容器 <div>-->
        <p>
            <div class="btn btn-default">hikari</div>
            <div class="btn btn-primary">hikari</div>
            <div class="btn btn-danger">hikari</div>
            <div class="btn btn-warning">hikari</div>
            <div class="btn btn-info">hikari</div>
        </p>
        <p>
            <div class="btn btn-primary btn-lg">hikari</div>
            <div class="btn btn-primary">hikari</div>
            <div class="btn btn-primary btn-sm">hikari</div>
            <div class="btn btn-primary btn-xs">hikari</div>
        </p>
        <p>
            <div class="btn btn-primary btn-block">hikari</div>
        </p>
        <p>
            <div disabled="disabled" class="btn btn-default">hikari</div>
            <div class="btn btn-default active">hikari</div>
            <div class="btn btn-default">hikari</div>
        </p>
    </div>
</body>

button.jpg

按钮组 btn-group

<body>
    <div class="well">
        <div class="btn-toolbar">
            <div class="btn-group btn-group-lg">
                <button class="btn btn-default">hikari</button>
                <button class="btn btn-default">hikari</button>
                <button class="btn btn-default">hikari</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">hikari</button>
                <button class="btn btn-default">hikari</button>
                <button class="btn btn-default">hikari</button>
            </div>
        </div>
        <p>
            <div class="btn-group-vertical">
                <button class="btn btn-default">hikari</button>
                <button class="btn btn-default">hikari</button>
                <button class="btn btn-default">hikari</button>
            </div>
        </p>
    </div>
</body>

按钮组.jpg

导航 nav

<ul class="nav nav-tabs">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, quas, ullam, saepe expedita facilis dolor est vero fugiat doloremque animi aut velit sunt nesciunt enim repellendus alias deserunt atque at.
    </div>
    <br>
    <br>
    <ul class="nav nav-pills">
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, quas, ullam, saepe expedita facilis dolor est vero fugiat doloremque animi aut velit sunt nesciunt enim repellendus alias deserunt atque at.
    </div>

nav01.jpg

<ul class="nav nav-tabs nav-justified">   <!--占整宽，平均分布-->
        <li class="active"><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">忘记密码</a></li>
    </ul>
    <div>
        <h1>登录</h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, quas, ullam, saepe expedita facilis dolor est vero fugiat doloremque animi aut velit sunt nesciunt enim repellendus alias deserunt atque at.
    </div>
    <br>
    <br>
    <div class="row"> <!--消除左边padding-->
        <div class="col-xs-4"> <!--栅格-->
            <ul class="nav nav-pills nav-stacked"> <!--stacked: 堆叠-->
                <li class="active"><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">忘记密码</a></li>
            </ul>
        </div>
        <div class="col-xs-8">
            <div>
                <h1>登录</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, quas, ullam, saepe expedita facilis dolor est vero fugiat doloremque animi aut velit sunt nesciunt enim repellendus alias deserunt atque at.
            </div>
        </div>
    </div>

nav02.jpg

导航栏 navbar

<div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a  class="navbar-brand">HIKARI</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-coutrol">
                    </div>
                    <button type="submit" class="btn btn-default">search</button>
                </form>
                <ul class="nav navbar-nav navbar-right"> <!--float right-->
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </div>
    </div>

navbar.jpg