天堂av在线网站,美女网站色免费,欧美这里只有精品

導(dǎo)讀網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立...

網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。

本章給大家?guī)韺W(xué)習(xí)Bootstrap后的一點(diǎn)小總結(jié)，讓大家可以知道Bootstrap的組成、Bootstrap 的優(yōu)缺點(diǎn)、Bootstrap 如何實(shí)現(xiàn)響應(yīng)式布局（示例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

【相關(guān)視頻推薦：Bootstrap教程】

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

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

常見問題：

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)式布局

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

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

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

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

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

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

知識點(diǎn)：

1.基本用法

制作簡單登錄頁面

<!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>
    <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>
                <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>

效果圖：

2.Bootstrap JS 組件

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

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

效果圖：

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

代碼示例：

<!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個，屏幕尺寸 < 576px時，每行12個；768px>=屏幕尺寸>=576px時，每行6個；992px>=屏幕尺寸>=768px時，每行4個；屏幕尺寸>=992px時，為每行3個；

效果圖：

4.Bootstrap 定制方法

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

以上就是學(xué)習(xí)Bootstrap后的一點(diǎn)小總結(jié)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁設(shè)計教程 > 詳細(xì)頁面

學(xué)習(xí)Bootstrap后的一些小總結(jié)

本類教程下載

系統(tǒng)下載排行