前端框架-Bootstrap

時間  2019-11-30
標籤 前端 框架 bootstrap 欄目 Bootstarp 简体版
原文   原文鏈接

Bootstrap 前端框架-twittercss

<!DOCTYPE html>
<html lang="en">
<!--Bootstrap 前端框架-twitter-->
<head>
    <meta charset="UTF-8">
    <title>認識Bootstrap</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <style>
        /*就近原則和疊加原則*/
        body {
            margin: 60px;
        }
        .progress {
            margin-top: 30px;
        }
        .test1 {
            width: 200px;
            color: black;
        }
        .test3{
            /*width: 200px;*/
            /*改變大小*/
            font-size: 400px;
            color: orangered;
        }
    </style>
</head>
<body>
    <!--按鈕-->
    <button class="btn btn-danger test1">百度一下,你就知道</button>
    <button class="btn btn-success">谷歌一下,你就知道</button>
    <button class="btn btn-warning">搜狗一下,你就知道</button>
    <!--進度條-->
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">60% Complete</span>
        </div>
    </div>
    <!--帶動畫的-->
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
            <span class="sr-only">45% Complete</span>
        </div>
    </div>
    <!--徽章-->
    <a href="#">Inbox <span class="badge">42</span></a>

    <button class="btn btn-primary" type="button">
        Messages0.... <span class="badge">4</span>
    </button>
    <br>
    <!--字體圖標-->
    <span class="glyphicon glyphicon-film test3"></span>
    <span class="glyphicon glyphicon-trash test3"></span>
</body>
</html>

效果圖html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程