1. Input box control
Add text or icon to the left of the input box
First use a class with input-group to wrap the input box and the element to be added
Then add a parent element to the periphery of the element to be added, add an input-group-addon class to the parent element, and put the icon, text, etc. to be added into this parent element, as follows:
<div class="input-group"> <span class="input-group-addon"> <span class="glyphicon glyphicon-user"></span> </span> <input type="text" name="" id="" value="" class="form-control" /> </div>
renderings
It can also be added on the right and both sides, as long as the icon or text is placed in the responsive position
You can also put radio buttons and checkboxes in span
Add a button to the right of the input box
<div class="input-group"> <input type="text" name="" id="" value="" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-success">按钮</button> </span> </div>
The method of adding buttons is similar to adding text and icons. Replace the input-group-addon class in the parent element with input-group-btn
renderings
Add a drop-down menu behind an input box
<div class="input-group mar"> <input type="text" name="" id="" value="" class="form-control" /> <div class="input-group-btn"> <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> <li>Menu</li> </ul> </div> </div>
2. Navigation component
The following are several types of navigation
<div class="container"> <!--tabbed navigation nav-tabs--> <ul class="nav nav-tabs"> <li class="active"><a href="#">标签导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> <br /> <!--Capsule navigation nav-pills --> <ul class="nav nav-pills"> <li class="active"><a href="#">胶囊导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> <br /> <!--vertical capsule navigation nav-stacked --> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">垂直胶囊</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> <br /> <!--Navigation justified nav-justified--> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">两端对齐</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> </div>
Icon:
You can also add dropdown menus on the navigation
<div class="container"> <!--tabbed navigation nav-tabs--> <ul class="nav nav-tabs"> <li class="active"><a href="#">标签导航</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown">我是导航 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> <li><a href="">菜单</a></li> </ul> </li> <li><a href="#">下拉菜单</a></li> <li><a href="#">我是导航</a></li> <li><a href="#">我是导航</a></li> </ul> </div>
Use a tag as a button, add dropdown-toggle class, data-dropdown attribute,
Add the dropdown attribute to the parent element.
Icon:
Navigation bar component
<nav class="navbar navbar-default"> <div class="container"> <!--Insert title or LOGO in navigation--> <div class="navbar-header"> <a class="navbar-brand" href="">标题</a> </div> <!--Insert navigation in navigation --> <ul class="nav navbar-nav"> <li class="active"><a href="">导航条</a></li> <li><a href="">导航条</a></li> <li><a href="">导航条</a></li> <li><a href="">导航条</a></li> </ul> <!--Insert form in navigation--> <form action="#" method="post" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" name="" id="" value="" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-default dropdown-toggle">搜索</button> </span> </div> </form> </div> </nav>
renderings
Insert LOGO in the navigation bar (preferably write a div for easy control)
<div class="navbar-header"> <a class="navbar-brand" href="">标题</a> </div>
Insert Navigation in Navigation Bar
<ul class="nav navbar-nav"> <li><a href="">...</a></li> </ul>
Insert form in navigation bar
<form action="#" method="post" class="navbar-form navbar-right">...</form>
Insert a button in the navigation bar, set the alignment (left or right)
<button class="btn btn-default navbar-btn navbar-right">按钮</button>
Insert text and links in the navigation bar (hyperlinks are generally placed in block-level elements, otherwise they will not be aligned)
<p class="navbar-text">I am the text<a class="navbar-link" href="">I am the link</a></p>
Fix navigation to the top (navbar-fixed-top) / bottom (navbar-fixed-top) of the screen
By default the content will be overlaid below the navigation bar
<nav class="navbar navbar-default navbar-fixed-top">...</nav>