运行结果如图所示：
代码如下所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" /> <title></title> <link href="css/bootstrap.css" rel="stylesheet" /> <style type="text/css"> .text{ display: block; } .mylist{ height: 42px; background: rgb(244,243,254,0.69); border: 1px solid #CCCCCC; } </style> </head> <body> 1.小图标：<br /> <div class="container"> <div class="row text-center mylist"> <div class="col-xs-3"> <span class="glyphicon glyphicon-home"></span> <span class="text">首页</span> </div> <div class="col-xs-3"> <span class="glyphicon glyphicon-zoom-in"></span> <span class="text">服务</span> </div> <div class="col-xs-3"> <span class="glyphicon glyphicon-gift"></span> <span class="text">商品</span> </div> <div class="col-xs-3"> <span class="glyphicon glyphicon-user"></span> <span class="text">我的联通</span> </div> </div> </div> 2.下拉菜单：<br /> <div class="dropdown open"> <button class="btn btn-default" data-toggle="dropdown">下拉列表 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="active"><a href="#">No.1</a></li> <li ><a href="#">No.2</a></li> <li ><a href="#">No.3</a></li> <li class="divider"></li> <li ><a href="#">No.4</a></li> </ul> </div> 3.分离式的下拉列表<br /> <div class="btn-group"> <button class="btn btn-danger">Action</button> <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="active"><a href="#">No.1</a></li> <li ><a href="#">No.2</a></li> <li ><a href="#">No.3</a></li> <li class="divider"></li> <li ><a href="#">No.4</a></li> </ul> </div> 4.输入框：<br /> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" placeholder="姓名" /> </div> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入要搜索的内容" /> <span class="input-group-addon">百度一下</span> </div> 5.按钮作为addon<br /> <div class="input-group"> <input type="text" class="form-control" placeholder="请输入要搜索的内容" /> <span class="input-group-btn"> <button class="btn btn-danger">百度一下</button> </span> </div> 6.导航和导航条：<br /> 选项卡导航：<br /> <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> </ul> <br /> 胶囊式选项卡导航：<br /> <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> </ul> 自适应导航：<br /> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">主页</a></li> <li><a href="#">微博</a></li> <li><a href="#">图书</a></li> <li><a href="#">关于我们</a></li> </ul> <br /> 二级导航：<br /> <ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">图片</a></li> <li><a href="#">个人</a></li> <li class="dropdown"> <a href="#" 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> </ul> 导航条：<br /> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a href="#" class="navbar-brand">LOGO</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">主页</a></li> <li><a href="#">微博</a></li> <li><a href="#">图书</a></li> </ul> </nav> 导航条中的表单：<br /> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a href="#" class="navbar-brand">LOGO</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">主页</a></li> <li><a href="#">微博</a></li> <li><a href="#">图书</a></li> </ul> <form role="Serach" class="navbar-form navbar-right" action="" method="post"> <div class="form-group"> <input type="text" class="form-control" placeholder="Serach" /> </div> <input type="submit" class="btn btn-primary" value="搜索"/> </form> </nav> 导航栏中的文本：<br /> <nav class="navbar navbar-inverse" role="navigation"> <div class="navbar-header"> <a href="#" class="navbar-brand">LOGO</a> </div> <ul class="nav navbar-nav"> <p class="navbar-text">文字</p> </ul> </nav> 顶部固定或底部固定<br /> <nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation"> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand">LOGO</a> </div> <div class="collapse navbar-collapse navbar-left"> <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> <li><a href="#">关于我们</a></li> </ul> </div> </nav> 缩略图：<br /> <div class="container"> <div class="row"> <div class="col-md-2 col-xs-6"> <a class="thumbnail" href="#"> <img src="img/logo.png"/> </a> <a class="thumbnail" href="#"> <img src="img/logo.png"/> </a> <a class="thumbnail" href="#"> <img src="img/logo.png"/> </a> <a class="thumbnail" href="#"> <img src="img/logo.png"/> </a> <a class="thumbnail" href="#"> <img src="img/logo.png"/> </a> </div> </div> </div> <script type="text/javascript" src="js/jquery-1.12.4.js" ></script> <script type="text/javascript" src="js/bootstrap.js" ></script> </body> </html>
