Bootstrap 小结

Bootstrap4特点：1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本

Bootstrap组成：1.基础样式 2.常用组件 3.JS插件

常见问题：

1.Bootstrap 的优缺点

优点：CSS 代码结构合理 ，现成的样式可以直接用

缺点：定制较为繁琐，体积大

2.Bootstrap 如何实现响应式布局

原理：通过 media query 设置不同分辨率的class

使用：为不同分辨率选择不同的网格class

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 源文件，修改变量

Bootstrap 小结的更多相关文章

  1. bootstrap小结

    bootstrap总结 bootstrap总结 base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级 ...

  2. bootStrap小结3

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  3. bootStrap小结2

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  4. bootStrap小结1

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Node.js + Express 构建的订餐系统

    Node.js的版本 - v0.8.12 Express的版本 – v3.3.3  (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...

  6. 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结

    关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...

  7. Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结

    Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min ...

  8. Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结

    Bootstrap表格插件bootstrap-table配置与应用小结   by:授客 QQ:1033553122 1.   测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...

  9. bootstrap与Select2使用小结

    这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...

随机推荐

  1. Fullpage参数说明

    参数说明 $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false,//绑定菜单,设定的相关属 ...

  2. 使用Puppeteer抓取受限网站

    不要相信前端是安全的,今天简单验证一下,但是希望大家支持正版,支持原作者,毕竟写书不易. 安装Puppteer npm install --save puppeteer 选择目标网站 我们这里选择胡子 ...

  3. 3sum(从数组中找出三个数的和为0)

    Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...

  4. 更改一个链接的文本、URL 以及 target

    <html> <head> <script type="text/javascript"> function changeLink() { do ...

  5. jBPM4工作流应用开发指南

    首先十分感谢作者给我这个机会在他的作品即将问世之前做一些感想,也正好让我能在忙碌中抽空回顾一下这么多年在技术平台方面走过的路以及在Workflow方面的点点滴滴.因为本书是介绍jBPM的专业书籍,所以 ...

  6. 基于JS的WEB会议室预订拖拽式图形界面的实现

    06年的一篇blog,转到这个博客上: 很早之前写的,后来由于这个功能模块取消,最终没有上线,所以与Server交互的那部分还没有写,不过那部分方案我也已经出来了,而且现在客户端这一部分已经通过了比较 ...

  7. DDGScreenShot — 复杂屏幕截屏（如view ScrollView webView wkwebView）

    写在前面 最近有这么一个需求,分享页面,分享的是web订单截图,既然是web 就会有超出屏幕的部分, 生成的图片还要加上我们的二维码,这就涉及到图片的合成了. 有了这样的需求,就是各种google.也 ...

  8. 分享一个开源的网盘下载工具BaiduPCS-Go

    大家在使用网盘的时候,一定忍受不了限速下载的速度.今天给大家分享一个开源的网盘下载项目BaiduPCS-Go.Go语言编写,仿 Linux shell 文件处理命令的百度网盘命令行客户端.多平台支持, ...

  9. memcached server install(WSL)

    prepare:0) libevent-dev1) libseccomp-dev2) build-essential3) automake install: https://www.liquidweb ...

  10. 关于Spring的HibernateTemplate的findByExample方法使用时的一点注意。

    此前我们已经介绍了HibernateTemplate的使用配置方法,但是对其使用没有仔细说明.因为最近比较忙,我先不去介绍,而是重点说明一下容易引起问题的findByExample方法. 我尝试反编译 ...