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 @   QiaoZhi  阅读(3252)  评论(0)  编辑  收藏  举报
编辑推荐：
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 一个奇形怪状的面试题：Bean中的CHM要不要加volatile？
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· Obsidian + DeepSeek：免费 AI 助力你的知识管理，让你的笔记飞起来！
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示