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. 基于异步队列的生产者消费者C#并发设计

    继上文<<基于阻塞队列的生产者消费者C#并发设计>>的并发队列版本的并发设计,原文code是基于<<.Net中的并行编程-4.实现高性能异步队列>>修改 ...

  2. IoC和DI的基本概念的思维导图

    最近在学习Spring开发,IoC这个概念让我有点儿迷糊,控制反转这四个字是在是无法做到望文生义,于是乎就找了一些材料来学习,研究了半天,绘制了下面这幅思维导图.仅供参考!

  3. 项目中Orcale存储过程优化记录

    今天对之前写的Orcale存储过程做了一些优化,使其变得更加灵活,之前写的存储过程是使用游标存储SQL执行结果,但是使用游标带来的弊端是,在声明时,它所执行的SQL就已经被写死,无法修改.若想更加灵活 ...

  4. miniUI中弹出框问题

    ---恢复内容开始--- 设置页面弹出框并提交弹出框内容 弹出按钮 <a class="btn_color_1" onclick="onEdit(0)"& ...

  5. Mongodb3.6 基操命令（二）——如何使用help

    前言 在上一篇文章Mongodb3.6 快速入门(一)中,我们主要使用两个命令: 1.mongod #启动服务 2.mongo #连接mongodb 对于刚接触mongo的人来说,该怎么给命令传递参数 ...

  6. spring是如何管理 事务的

    Spring提供的事务管理可以分为两类:编程式的和声明式的.编程式的,比较灵活,但是代码量大,存在重复的代码比较多:声明式的比编程式的更灵活方便.  1.传统使用JDBC的事务管理  以往使用JDBC ...

  7. PLSQL学习教程(全)

    基于ORACLE9i+PL/SQLDeveloper7.1.4) 课程 一 PL/SQL 基本查询与排序 本课重点: 1.写SELECT语句进行数据库查询 2.进行数学运算 3.处理空值 4.使用别名 ...

  8. webstorm配置eslint【标记错误，修复错误】

    项目中经常用到eslint语法,结合个人经验,用webstorm配置eslint "文件"->"默认设置"->"语言&框架&quo ...

  9. java中面试可能会问的问题

    为了明年的面试,把面试中可能遇到的关于java的问题记录在下面,纯个人理解,如果有误,请指正! 1.java中拷贝的三种方式,以及他们的区别. 这三种方式分别是:直接赋值,浅拷贝,深拷贝.第一种直接赋 ...

  10. Bootstrap在线引用css和js

    百度在线调用 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></ ...