Bootstrap（一）: 简介及使用方法

什么是bootstrap？

是一种方便你编辑网页样式的方法，通过类名加载前辈设置好的样式

网址：getbootstrap.com，中文网址：v3.bootcss.com

使用：

下载-下载源码（会下载一个压缩包），另一种下载方法（去bootcdn.com里下，搜索bootstrap-选择后缀名为bootstrap.css的地址拷贝），然后引入bootstrap，不断往里面加类即可。

在不添加任何样式下，建立一个登录页面：

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>登录</h1>
        <form>
            <div>
                <lable>用户名</lable>
                <input type="text">
            </div>
            <div>
                <lable>密码</lable>
                <input type="password">
            </div>
            <div>
                <button type="submit">登录</button>
            </div>
        </form>
    </body>
</html>

效果图：

引用bootstrap样式：

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
    </head>
    <body>
        <h1>登录</h1>
        <form class="container">
            <div class="form-group">
                <lable>用户名</lable>
                <input class="from-control" type="text">
            </div>
            <div class="form-group">
                <lable>密码</lable>
                <input class="from-control" type="password">
            </div>
            <div class="from-group" >
                <button class="btn btn-primary" type="submit">登录</button>
            </div>
        </form>
    </body>
</html>

效果图：

引入bootstrap后，会使我们的样式设置便捷很多。如果还有某些样式效果达不到你的预期效果，我们还可以进行针对性的添加样式，注意，这里所要修改的样式应该放在bootstrap的引入链接之后，去覆盖它。

如，更改登录按钮的背景和边框颜色：

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
    <style>
        .btn.btn-primary{
            background-color: #aa2200;
            border-color: #aa2200;
        }
    </style>
</head>
<body>
<h1>登录</h1>
<form class="container">
    <div class="form-group">
        <lable>用户名</lable>
        <input class="from-control" type="text">
    </div>
    <div class="form-group">
        <lable>密码</lable>
        <input class="from-control" type="password">
    </div>
    <div class="from-group" >
        <button class="btn btn-primary" type="submit">登录</button>
    </div>
</form>
</body>
</html>

效果图：

同样，和自己添加css的方法一样，我们还可以给标签加类，然后去定义这个类的样式。

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css">
    <style>
        .btn.btn-primary{
            background-color: #aa2200;
            border-color: #aa2200;
        }
        .contaner-small{
            max-width: 500px;
        }
    </style>
</head>
<div class="container contaner-small">
    <h1>登录</h1>
    <div class="alert alert-success">登录成功～正在跳转...</div>
    <form">
        <div class="form-group">
            <lable class="container">用户名</lable>
            <input class="from-control container" type="text">
        </div>
        <div class="form-group">
            <lable class="container">密码</lable>
            <input class="from-control container" type="password">
        </div>
        <div class="from-group" >
            <button class="btn btn-primary" type="submit">登录</button>
        </div>
</form>
</div>
</html>

效果图：

Bootstrap（一）: 简介及使用方法

猜你喜欢