蘑菇博客

Bootstrap实例

Bootstrap 4 实例

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <title>Bootstrap</title>
</head>
<body>
    <h1>Hello, world!</h1>
    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/popper-1.14.7.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

下载：Bootstrap 4

Bootstrap 3 实例

<!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, maximum-scale=1, user-scalable=no">
    <title>首页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form method="post" action="">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" placeholder="">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" placeholder="">
            </div>
            <div class="form-group">
                <label>选择文件</label>
                <input type="file">
                <p class="help-block">最大10M</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 记住我
                </label>
            </div>
            <button type="submit" class="btn btn-default">登录</button>
        </form>
    </div>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

下载：Bootstrap 3

mogu