首页 > 代码库 > bootstrap

bootstrap

2024-08-08 13:01:02   218人阅读

1、导航

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">      <div class="container">        <div class="navbar-header">          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <a class="navbar-brand" href="http://www.mamicode.com/#">Project name</a>        </div>        <div class="navbar-collapse collapse">          <form class="navbar-form navbar-right" role="form">            <div class="form-group">              <input type="text" placeholder="Email" class="form-control">            </div>            <div class="form-group">              <input type="password" placeholder="Password" class="form-control">            </div>            <button type="submit" class="btn btn-success">Sign in</button>          </form>        </div><!--/.navbar-collapse -->      </div>    </div>

 

<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <a class="navbar-brand" href="http://www.mamicode.com/#">W3Cschool</a>   </div>   <div>      <form class="navbar-form navbar-left" role="search">         <div class="form-group">            <input type="text" class="form-control" placeholder="Search">         </div>         <button type="submit" class="btn btn-default">提交</button>      </form>       </div></nav>

3、默认的导航栏

  • 向 <nav> 标签添加 class .navbar、.navbar-default。
  • 向上面的元素添加 role="navigation"，有助于增加可访问性。
  • 向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
  • 为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。
<nav class="navbar navbar-default" role="navigation">   <div class="navbar-header">      <a class="navbar-brand" href="http://www.mamicode.com/#">W3Cschool</a>   </div>   <div>      <ul class="nav navbar-nav">         <li class="active"><a href="http://www.mamicode.com/#">iOS</a></li>         <li><a href="http://www.mamicode.com/#">SVN</a></li>         <li class="dropdown">            <a href="http://www.mamicode.com/#" class="dropdown-toggle" data-toggle="dropdown">               Java                <b class="caret"></b>            </a>            <ul class="dropdown-menu">               <li><a href="http://www.mamicode.com/#">jmeter</a></li>               <li><a href="http://www.mamicode.com/#">EJB</a></li>               <li><a href="http://www.mamicode.com/#">Jasper Report</a></li>               <li class="divider"></li>               <li><a href="http://www.mamicode.com/#">分离的链接</a></li>               <li class="divider"></li>               <li><a href="http://www.mamicode.com/#">另一个分离的链接</a></li>            </ul>         </li>      </ul>   </div></nav>

 

bootstrap


联系
我们