master

分支 (1)

管理

管理

master

lnmpbroter
/
134.bootstrap 按钮.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" " crossorigin="anonymous">-->
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"  crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"  crossorigin="anonymous"></script>
    <script src="jquery1.11.3.js"></script>
    <style>
        .row>div{
            border: 1px solid red;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        .table-hover > tbody > tr:hover {
            background-color: pink;
        }
        .container{
            width: 500px;
            border: 1px solid black;
            border-radius: 10px;
            padding: 20px;
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div class="container">
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">

    <button type="button" class="btn btn-default">（默认样式）Default</button>
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
    <button type="button" class="btn btn-success">（成功）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="button" class="btn btn-lg">大</button>
    <button type="button" class="btn btn-sm">中号</button>
    <button type="button" class="btn btn-xs">小号</button>

    <button type="button" class="btn btn-primary active">激活</button>
    <button type="button" class="btn btn-primary">不激活</button>
    <button type="button" class="btn btn-default" disabled>禁用</button>
</div>
</body>
</html>