bootstrap 预定义样式风格

时间：2023-03-10 08:02:40
bootstrap 预定义样式风格 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <!-- 处理低版本IE 4.0不考虑IE8 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 移动端视口的设置 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入bootstrap.css -->

    <link rel="stylesheet" href="css/bootstrap.css">

    <style>

        #login{

            width:400px;

        }

    </style>

</head>

<body>

<div class="container">

    <br>

    <input type="button" value="默认样式">

    <input type="button" value="首选项" class="btn btn-primary">

    <input type="button" value="成功" class="btn btn-success">

    <input type="button" value="一般信息" class="btn btn-info">

    <input type="button" value="警告" class="btn btn-warning">

    <input type="button" value="危险" class="btn btn-danger">

    <br>

    <br>

    <p>默认段落</p>

    <p class="bg-primary">首选项</p>

    <p class="bg-success">成功</p>

    <p class="bg-info">一般信息</p>

    <p class="bg-warning">警告</p>

    <p class="bg-danger">危险</p>

    <br>

    <span>默认文字</span>

    <span class="text-primary">首选项</span>

    <span class="text-success">成功</span>

    <span class="text-info">一般信息</span>

    <span class="text-warning">警告</span>

    <span class="text-danger">危险</span>

    <br>

    <a href="#" class="btn btn-primary">连接1</a>

    <a href="#" class="bg-success">连接2</a>

    <a href="#" class="text-danger">连接3</a>

    <br><br>

    <div class="alert alert-warning">我是警告框</div>

    <div class="alert alert-danger">我是危险信息</div>

    <br><br>

    <div class="panel panel-primary">

        <div class="panel-heading">

            <h4>我是面板的标题</h4>

        </div>

        <div class="panel-body">

            我是面板的主体内容！

        </div>

    </div>

</div>

<div class="container">

    <br>

       <div id="login" class="panel panel-primary">

        <div class="panel-heading">

            Login

        </div>

        <div class="panel-body">

            <div class="form-group">

                <label>用户名:</label><input type="text" class="form-control">

                <div class="alert alert-warning">用户名不能为空！</div>

                <label>密码:</label><input type="password" class="form-control">

            </div>

            <a href="#" class="text-info">忘记密码?</a>

            <input type="button" value="登录" class="btn btn-primary pull-right">

        </div>

    </div>

</div>

</body>

<script>

    /*

        预定义样式风格

            primary (首选项)

            success (成功)

            info (一般信息)

            warning (警告)

            danger (危险)

            实例 ：登录框

     */

</script>

相关文章