bootstrap带图标的按钮与图标做连接

　　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>&nbsp;&nbsp;&nbsp;固定资产登记</h3>
                <div class="pull-right">
                    <span>欢迎</span>
                    <i class="glyphicon glyphicon-user"></i>
                    <lable class="username">管理员</lable>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="#">退出系统</a>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </div>
                <!--清除浮动-->
                <div class="clearfix">
                </div>
            </div>

            <div id="bottom">
                <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <p type="button" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-plus"></span>添加记录</p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <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{
                width: 100%;
            }
            body{
                background-color: #FFFFFF;
            }
            #container {
                margin: 0px auto;
                text-align: left;
                width: 90%;
                height: 600px;
                border: 1px solid green;
            }

 

posted @ 2017-08-23 17:14  QiaoZhi  阅读(3172)  评论(0)  编辑  收藏  举报