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. vue2.0-基于elementui换肤[自定义主题]

    0. 直接上 预览链接 vue2.0-基于elementui换肤[自定义主题] 1. 项目增加主题组件 在项目的src/components下添加skin文件夹 skin文件获取地址 2. 项目增加自 ...

  2. linux swing 乱码

    转载 Linux下关于解决JavaSwing中文乱码的情况 redhed 貌似没出现乱码 本身就jdk就支持中文 红旗linux  suse等都不支持,需要自己手工配置,解决办法: 第一种方法: 1. ...

  3. 6.3 Query 语句对系统性能的影响

    我们重点分析实现同样功能的不同SQL 语句在性能方面会产生较大的差异的根本原因,并通过一个较为典型的示例来对我们的分析做出相应的验证. 为什么返回完全相同结果集的不同SQL 语句,在执行性能方面存在差 ...

  4. AS3编程规范

    整理了一些AS3的编程规范,有些规则对于大部分语言都是适用的,有什么问题请提出来,我会持续改进这份规范,谢谢!   [参考资料] 1.http://opensource.adobe.com/wiki/ ...

  5. printf("Hello 2018!");

    月考 has Boom! 要全心准备期末考试,到年前是不能再看Blog了 新年加油!!! 不要感冒 :joy:

  6. 建站记录：设置apache .htaccess文件给网站添加404错误处理页面

    有些空间服务商会在后台设置中,提供这个选项,可以直观地设置404错误指向的页面,这一点很方便,比如我之前用的阿里云虚拟主机就可以在控制台直接设置. 新租用的香港主机后台没有找到选取文件的地方,只是可以 ...

  7. python 脚本自动登陆校园网

    学校的校园网每次重开电脑时都要重新打开浏览器进行网页登录,繁琐的操作比较麻烦,于是便写了个python的脚本进行自动登录,下面说下具体的操作过程: 1. 方法说明 博主采用的python的 reque ...

  8. PHP 中的 __FILE__ 和__DIR__常量

    __DIR__ :当前内容写在哪个文件就显示这个文件目录 __FILE__ : 当前内容写在哪个文件就显示这个文件目录+文件名 比如文件 b.php 包含如下内容: <?php $basedir ...

  9. break-跳出内循环

    i = 1 j = 1 while i <= 10: print('第%d个碗' % i) while j <= 10: if j == 5: break else: print('这是内 ...

  10. Java中浮点数的精度问题 【转】

    当您在计算Money的时候,请看好了!!!要不损失了别后悔!!! 现象1: public static void main(String[] args) { System.out.println(0. ...