按钮 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 href="http://www.baidu.com" 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
网友评论