bootstrap通过引入bootstrap的JS与css文件，给元素添加class属性即可。
使用图标只需要加入一个span,class属性设置为对应的图标属性即可。图标对应的class属性可以参考菜鸟教程:
http://www.runoob.com/bootstrap/bootstrap-glyphicons.html
带图标的按钮:
图标做连接:
效果:
代码:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>主要界面</title> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/product.css" rel="stylesheet"> <!-- 引入jQuery核心js文件 --> <script src="js/jquery-2.1.0.js"></script> <!-- 引入BootStrap核心js文件 --> <script src="js/bootstrap.min.js"></script> </head> <body> <div id="container"> <!--放头--> <div id="top" style="border: 1px solid green;"> <h3> 固定资产登记</h3> <div class="pull-right"> <span>欢迎</span> <i class="glyphicon glyphicon-user"></i> <lable class="username">管理员</lable> <a href="#">退出系统</a> </div> <!--清除浮动--> <div class="clearfix"> </div> </div> <div id="bottom"> <br /> <p type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></span>添加记录</p> <p type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search"></span>查询所有</p> <br /> <br /> <table class="table table-striped table-bordered"> <thead> <tr> <th>名称</th> <th>规格及型号</th> <th>使用部门</th> <th>来源</th> <th>购建日期</th> <th>使用人</th> <th>操作</th> </tr> </thead> <tbody> <tr> <th>名称</th> <th>名称</th> <th>名称</th> <th>名称</th> <th>名称</th> <th>名称</th> <th> <a href="#"> <span class="glyphicon glyphicon-pencil"></span> </a> <a href="#"> <span class="glyphicon glyphicon-trash"></span> </a> <a href="#"> <span class="glyphicon glyphicon-search"></span> </a> </th> </tr> <tr> <th>名称</th> <th>名称</th> <th>名称</th> <th>名称</th> <th>城市</th> <th>邮编</th> <th> <a href="#"> <span class="glyphicon glyphicon-pencil"></span> </a> <a href="#"> <span class="glyphicon glyphicon-trash"></span> </a> <a href="#"> <span class="glyphicon glyphicon-search"></span> </a> </th> </tr> <tr> <th>名称</th> <th>名称</th> <th>名称</th> <th>名称</th> <th>城市</th> <th>邮编</th> <th> <a href="#"> <span class="glyphicon glyphicon-pencil"></span> </a> <a href="#"> <span class="glyphicon glyphicon-trash"></span> </a> <a href="#"> <span class="glyphicon glyphicon-search"></span> </a> </th> </tr> </tbody> </table> </div> </div> </body> </html>
product.css
html,body{
100%;
}
body{
background-color: #FFFFFF;
}
#container {
margin: 0px auto;
text-align: left;
90%;
height: 600px;
border: 1px solid green;
}