<!doctype html> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width, initial-scale=1"> <title>Bootstrap</title> <linkrel="stylesheet"href="css/bootstrap.css"rel="external nofollow"/> </head> <body> <divclass="container"> <divclass="row"> <divclass="input-group"><!--输入框组--> <spanclass="input-group-addon">@</span> <!--input-group-addon给输入框前后添加辅助的额外元素--> <inputtype="text"class="form-control"/> </div> </div> <!--输入框组的大小--> <divclass="row"style="margin-top:10px;"> <divclass="input-group input-group-lg"> <!--input-group-lg为输入框组尺寸还有md,sm--> <spanclass="input-group-addon">@</span> <!--给输入框前后添加辅助的额外元素--> <inputtype="text"class="form-control"/> </div> </div> <divclass="row"style="margin-top:10px;"> <divclass="input-group"> <spanclass="input-group-addon"> <inputtype="checkbox"/> <!--输入框组添加额外元素为checkbox，还可以是radio--> </span> <inputtype="text"class="form-control"/> </div> </div> <divclass="row"style="margin-top:10px;"> <divclass="input-group"> <inputtype="text"class="form-control"/> <spanclass="input-group-btn"> <buttonclass="btn btn-default">搜索</button> </span> </div> </div> <divclass="row"style="margin-top:10px;"> <divclass="input-group"> <divclass="input-group-btn"> <buttonclass="btn btn-default dropdown-toggle"data-toggle="dropdown">学院课程<spanclass="caret"></span></button> <ulclass="dropdown-menu"> <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">html</a></li> <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">css</a></li> <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">javascript</a></li> <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">less</a></li> <li><ahref="#"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow">bootstrap</a></li> </ul> </div> <inputtype="text"class="form-control"/> </div> </div> </div> <scriptsrc="js/jquery-2.1.0.js"></script> <scriptsrc="js/bootstrap.js"></script> </body> </html> | 
