Bootstrap 小結

時間 2019-12-14

標籤 bootstrap 小結欄目 Bootstarp 简体版

原文原文鏈接

Bootstrap 小結css

Bootstrap4特色：1.兼容IE10+ 2.使用flexbox 佈局 3.拋棄Nomalize.css 4.提供佈局和 reboot 版本 html

Bootstrap組成：1.基礎樣式 2.經常使用組件 3.JS插件bootstrap

常見問題：佈局

1.Bootstrap 的優缺點flex

優勢：CSS 代碼結構合理，現成的樣式能夠直接用ui

缺點：定製較爲繁瑣，體積大flexbox

2.Bootstrap 如何實現響應式佈局spa

原理：經過 media query 設置不一樣分辨率的class插件

使用：爲不一樣分辨率選擇不一樣的網格class3d

3.如何基於 Bootstrap 定製本身的樣式

1.使用 css 同名類覆蓋（簡單場景使用）

2.修改源碼從新構建

3.引用 scss 源文件，修改變量

知識點：

1.基本用法

製做簡單登陸頁面

具體用法點擊這裏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <title>Bootstrap</title>
    <style>
        #result{
            display: none;
        }
        .title{
            margin-top: 50px;
            margin-bottom: 50px;
        }
        .operate button{
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <h2 class="title col-6 offset-3">註冊</h1>
    <form id="myForm" class="col-6 offset-3">
        <div class="form-group row">
            <label class="col-2 col-form-label">姓名</label>
            <div class="col-10">
                <input class="form-control" name="name" type="text" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">密碼</label>
            <div class="col-10">
                <input class="form-control" name="password" type="password" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">電話</label>
            <div class="col-10">
                <input class="form-control" name="cellphone" type="text" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">地址</label>
            <div class="col-10">
                <input class="form-control" name="address" type="text" />
            </div>
        </div>
        <div id="result" class="alert alert-danger">
            
        </div>
        <div class="operate form-group row">
            <button class="btn btn-primary" type="submit">提交</button>
        </div>
    </form>
    <script>
        var form = document.querySelector('#myForm');
        var result = document.querySelector('#result');
        form.addEventListener('submit', function(e){
            if(!document.querySelector('[name=password]').value){
                result.style.display = 'block';
                result.innerHTML = '密碼爲空';
            }else{
                result.style.display = 'none';
            }
            e.preventDefault();
        });
    </script>
</body>
</html>

效果展現

2.Bootstrap JS 組件

基於 jQuery 寫的，能夠完成不少交互效果，因此須要引入 jQuery ,還須要引入 Popper.js (庫）和 bootstrap.js

使用方式：1.基於 HTML 的 data-** 屬性 2.基於 JS API

示例

結果：

3.Bootstrap 響應式佈局

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <title>Bootstrap</title>
    <style>
        .content > div{
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #333;
            background:#cccccc;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內容</div></div>
        </div>
    </div>
</body>
</html>

　總共12個，屏幕尺寸 < 576px時，每行12個；768px>=屏幕尺寸>=576px時，每行6個；992px>=屏幕尺寸>=768px時，每行4個；屏幕尺寸>=992px時，爲每行3個；

結果：

4.Bootstrap 定製方法

方法：1.使用 css 同名類覆蓋（簡單場景使用） 2.修改源碼從新構建 3.引用 scss 源文件，修改變量