Bootstrap學(xué)習(xí)總匯

發(fā)布時(shí)間：2020-07-10 09:15:44 來(lái)源：億速云閱讀：264 作者：Leah 欄目：web開(kāi)發(fā)

本篇文章為大家展示了Bootstrap學(xué)習(xí)總匯，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

Bootstrap4特點(diǎn)：1.兼容IE10+ 2.使用flexbox 布局 3.拋棄Nomalize.css 4.提供布局和 reboot 版本

Bootstrap組成：1.基礎(chǔ)樣式 2.常用組件 3.JS插件

常見(jiàn)問(wèn)題：

1.Bootstrap 的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：CSS 代碼結(jié)構(gòu)合理，現(xiàn)成的樣式可以直接用

缺點(diǎn)：定制較為繁瑣，體積大

2.Bootstrap 如何實(shí)現(xiàn)響應(yīng)式布局

原理：通過(guò) media query 設(shè)置不同分辨率的class

使用：為不同分辨率選擇不同的網(wǎng)格class

3.如何基于 Bootstrap 定制自己的樣式

1.使用 css 同名類覆蓋（簡(jiǎn)單場(chǎng)景使用）

2.修改源碼重新構(gòu)建

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

知識(shí)點(diǎn)：

1.基本用法

制作簡(jiǎn)單登錄頁(yè)面

<!DOCTYPE html>
<html>
<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>
    <h3 class="title col-6 offset-3">注冊(cè)</h2>
    <form id="myForm" class="col-6 offset-3">
        <div class="form-group row">
            <label class="col-2 col-form-label">姓名</label>
            <div>
                <input name="name" type="text" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">密碼</label>
            <div>
                <input name="password" type="password" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">電話</label>
            <div>
                <input name="cellphone" type="text" />
            </div>
        </div>
        <div class="form-group row">
            <label class="col-2 col-form-label">地址</label>
            <div>
                <input 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>

效果圖：

Bootstrap學(xué)習(xí)總匯

2.Bootstrap JS 組件

基于 jQuery 寫的，可以完成很多交互效果，所以需要引入 jQuery ,還需要引入 Popper.js (庫(kù)）和 bootstrap.js

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

Bootstrap學(xué)習(xí)總匯

效果圖：

Bootstrap學(xué)習(xí)總匯

3.Bootstrap 響應(yīng)式布局

Bootstrap學(xué)習(xí)總匯

代碼示例：

<!DOCTYPE html>
<html>
<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>
        <div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
            <div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>內(nèi)容</div></div>
        </div>
    </div>
</body>
</html>

總共12個(gè)，屏幕尺寸 < 576px時(shí)，每行12個(gè)；768px>=屏幕尺寸>=576px時(shí)，每行6個(gè)；992px>=屏幕尺寸>=768px時(shí)，每行4個(gè)；屏幕尺寸>=992px時(shí)，為每行3個(gè)；

效果圖：

Bootstrap學(xué)習(xí)總匯

4.Bootstrap 定制方法

方法：1.使用 css 同名類覆蓋（簡(jiǎn)單場(chǎng)景使用） 2.修改源碼重新構(gòu)建 3.引用 scss 源文件，修改變量

上述內(nèi)容就是Bootstrap學(xué)習(xí)總匯，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

Bootstrap學(xué)習(xí)總匯

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽