BootStrap学习

发布时间：2020-12-17 20:57:21 所属栏目：安全来源：网络整理

导读：bootstrap字体图标 http://v3.bootcss.com/components/ ??字体图标大全 htmlhead meta http-equiv="Content-Type" content="text/html; charset=utf-8" / titlebootstrap/title link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" / script src="~

bootstrap字体图标

http://v3.bootcss.com/components/ ??字体图标大全

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>bootstrap</title>

    <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <span class="btn-group glyphicon glyphicon-user" style="font-size:40px"></span> 人像图案
    <span class="btn-group glyphicon glyphicon-cloud" style="font-size: 100px"></span> 云朵图案

    <button type="button" class="btn btn-lg">
        <span class="btn-group glyphicon glyphicon-user"></span> 在按钮中放置图案
    </button>

</body>
</html>

按钮

http://v3.bootcss.com/css/#buttons 按钮大全

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>bootstrap</title>

    <link href="~/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/bootstrap/js/bootstrap.js"></script>
</head>
<body>
    <!--使用 .btn-lg、.btn-sm 或 .btn-xs 可以获得不同尺寸的按钮。-->
    <button type="button" class="btn btn-default btn-lg">Default</button>

    <button type="button" class="btn btn-primary btn-sm">Primary</button>

    <button type="button" class="btn btn-success btn-xs">Success</button>

    <button type="button" class="btn btn-info">Info</button>

    <button type="button" class="btn btn-warning">Warning</button>

    <button type="button" class="btn btn-danger">Danger</button>

    <button type="button" class="btn btn-link">Link</button>

    <button type="submit" class="btn btn-default">提交</button>


    <!--出来button标签可以渲染成一个按钮外，其他的标签也可以-->
    <a class="btn btn-default" href="#" role="button">我是一个按钮</a>
    <input type="button" class="btn btn-default" value="我也是一个按钮" />

    <hr />

    <!--在按钮前面放置图标-->
    <button class="btn btn-warning btn-lg">
        <span class="glyphicon glyphicon-heart"></span> ? 按钮前面加了标图，中间用空格分开
    </button>

</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!