Input组合以及各种导航
<!DOCTYPE html> <html> <head> <title>06_Input&Nav.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <link rel="stylesheet" media="screen" href="../css/bootstrap.min.css"> <link rel="stylesheet" media="screen" href="../css/bootstrap-theme.min.css"> <script src="../js/jquery-1.11.2.js"></script> <script src="../js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3 class="page-header">输入组合</h3> <div class="row"> <div class="col-md-6"> <h4>1 基本组合</h4> <p>基于文本的输入框前面，后面或是两边加上文字或按钮</p> <p>在<code>.input-group</code>中加入<code>.input-group-addon</code>的<code><span></code></p> <p><code>.input-group-*</code>控制尺寸，尽量避免<code><select></code>，兼容性不完善</code></p> <p><code>.input-group</code>是一个独立的组件，不要与<code>.form-group</code>混合使用</p> <div class="input-group input-group-lg"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="input-group-lg"> </div> <div class="input-group input-group-xs"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="input-group-xs"> </div> <div class="input-group input-group-sm"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="input-group-sm"> </div> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon">$</span> </div> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">阿西坝</span> </div> </div> <div class="col-md-6"> <h4>2 各种嵌套</h4> <p><code><checkbox></code>嵌套</code> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input type="text" class="form-control"> </div> <p><code><radio></code>嵌套</code> <div class="input-group"> <div class="input-group-addon"> <input type="radio"> </div> <input type="text" class="form-control"> </div> <p><code><button></code>嵌套需要用<code>.input-group-btn</code>的行或块包住按钮 <div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">GO</button> </span> <input type="text" class="form-control"> </div> <p>带菜单按钮的嵌套</p> <div class="input-group"> <div class="input-group-btn dropup"> <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"> Action<span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">Drop Header</li> <li><a href="#">Actions</a></li> <li class="disabled"><a href="#">Disabled</a></li> </ul> </div> <input type="text" class="form-control"> </div> <div class="input-group input-group-lg"> <div class="input-group-btn"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">Drop Header</li> <li><a href="#">Actions</a></li> <li class="disabled"><a href="#">Disabled</a></li> </ul> </div> <input type="text" class="form-control"> </div> </div> </div> <h3 class="page-header">导航类</h3> <div class="row"> <div class="col-md-4"> <h4>1 导航页</h4> <p><code><ul></code>中同时加入<code>.nav</code>以及<code>.nav-tabs</code>这两个class，<code>后者依赖前者</code></p> <p><code>.active</code>起始选中某个分页，此处激活了Home</p> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <div class="col-md-4"> <h4>2 胶囊式</h4> <p><code>.nav</code>和<code>.nav-pills</code></p> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul> </div> <div class="col-md-4"> <h4>3 竖胶囊式</h4> <p>多加一个<code>.nav-stacked</code>，占满该行，宽度可调</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li style="width: 50%; background-color: pink;"><a href="#">Profile</a></li> <li style="background-color: pink;"><a href="#">Messages</a></li> </ul> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <h4>4 带菜单导航页</h4> <p>不知为何<code><button></code>覆盖了<code>.active</code>样式，不应该的</p> <ul class="nav nav-tabs"> <li class="active dropup"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">Drop Header</li> <li><a href="#">Actions</a></li> <li class="disabled"><a href="#">Disabled</a></li> </ul> </li> <li><a href="#">Profile</a></li> <li class="active"><a href="#">Messages</a></li> </ul> </div> <div class="col-md-12"> <h4>5 带菜单胶囊导航</h4> <p>不知为何<code><button></code>覆盖了<code>.active</code>样式，不应该的</p> <ul class="nav nav-pills"> <li class="dropup active"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">Drop Header</li> <li><a href="#">Actions</a></li> <li class="disabled"><a href="#">Disabled</a></li> </ul> </li> <li><a href="#">Profile</a></li> <li class="active"><a href="#">Messages</a></li> </ul> </div> </div> </div> <div class="col-md-6"> <div class="row"> <div class="col-md-12"> <h4>6 面包屑导航</h4> <p><code><ol></code>加入<code>.breadcrumb</code>，分割符自动地通过CSS的:before和content添加上了。</p> <ol class="breadcrumb"> <li><a href="#">蓝色超链接</a></li> <li>黑色普通</li> <li class="active">灰色是active</li> </ol> </div> <div class="col-md-12"> <h4>7 标签(label)</h4> <h5>Example heading <span class="label label-danger">New</span></h5> <h5>Example heading <span class="label label-warning">New</span></h5> <h5>Example heading <span class="label label-info">New</span></h5> <h6>Example heading <span class="label label-success">New</span></h6> <h6>Example heading <span class="label label-primary">New</span></h6> <h6>Example heading <span class="label label-default">New</span></h6> </div> </div> </div> </div> </div> </body> </html>
效果如下
