一、Bootstrap简介

Bootstrap 是目前受欢迎的前端框架之一，是基于HTML，CSS，JavaScript的，它简洁灵活，使web开发更加快捷

中文官网：http://www.bootcss.com/

官网：http://getbootstrap.com/

推荐：https://v3.bootcss.com/

1.优点

2. 版本

二、 Bootstrap 使用

控制权在框架本身，使用者要安装框架所规定的某种规范进行开发

Bootstrap 使用四部曲：

2.1 创建文件夹结构

2.2 创建html骨架结构

2.3 引入相关样式文件

2.4 书写内容

三、Bootstrap 布局容器

四、Bootstrap 栅格系统

4.1 栅格系统简介

注意：

rem 是把整个屏幕划分为若干等份

而栅格系统是把页面内容划分为若干等宽的列

不同屏幕下container一定会进行一个缩放的效果，这时候把container划分为12等份，如果是在大屏幕下，每列的宽就会变宽了，那么内容就会相对大一些，如果container变小了，每列的宽度也会跟着变小了，页面的内容就会发生相应的缩放，就会实现缩放的效果

总结：在BootStrap中，是把整个大的容器 container划分为12等份，container宽度不同，那么每一列的宽度也会不同，页面的内容也会随着宽度的变化而发生缩放的效果

4.2 栅格选项参数

4.3 栅格系统的基本使用

基本使用（一）

栗子：

<body>

    <div class="container">

       <div>1</div>

       <div>2</div>

       <div>3</div>

       <div>4</div>

    </div>

</body>

我们发现，这些 div 并没有平均分成 4 等份，想要实现列的平均划分，需要添加类前缀

我们当前是在大屏幕下，所以类前缀是 .col-lg

4个盒子平均占满12等份，每个盒子占3份

  1. 如果子元素的 份数相加等于12，那么子元素就能占满整个 container 的宽度

栗子：

<style>

    [class^=col]{

        border: 2px solid pink;

    }

</style>

 <div class="container">

       <div class="col-lg-3">1</div>

       <div class="col-lg-3">2</div>

       <div class="col-lg-3">3</div>

       <div class="col-lg-3">4</div>

    </div>

栗子2：

  <div class="container">

       <div class="col-lg-6">1</div>

       <div class="col-lg-2">2</div>

       <div class="col-lg-2">3</div>

       <div class="col-lg-2">4</div>

    </div>

  1. 如果孩子的份数相加 小于12，那么就占不满整个宽度
 <div class="container">

       <div class="col-lg-6">1</div>

       <div class="col-lg-2">2</div>

       <div class="col-lg-2">3</div>

       <div class="col-lg-1">4</div>

    </div>



3. 如果孩子的份数相加 大于12 ，多余的那一列会另起一行来显示

   <div class="container">

       <div class="col-lg-6">1</div>

       <div class="col-lg-2">2</div>

       <div class="col-lg-2">3</div>

       <div class="col-lg-3">4</div>

    </div>

基本使用（二）

栗子1： 在中等屏幕下，让孩子各占 4份

    <div class="container">

       <div class="col-lg-3 col-md-4">1</div>

       <div class="col-lg-3 col-md-4">2</div>

       <div class="col-lg-3 col-md-4">3</div>

       <div class="col-lg-3 col-md-4">4</div>

    </div>



栗子2： 在小屏幕下，让孩子占6份

   <div class="container">

       <div class="col-lg-3 col-md-4 col-sm-6">1</div>

       <div class="col-lg-3 col-md-4 col-sm-6">2</div>

       <div class="col-lg-3 col-md-4 col-sm-6">3</div>

       <div class="col-lg-3 col-md-4 col-sm-6">4</div>

    </div>



栗子3：在超小屏幕下，每个孩子占 12 份

  <div class="container">

       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>

       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>

       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>

       <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>

    </div>

4.4 栅格系统的列嵌套



栗子：

<style>

    .container>div{

        height: 50px;

         background-color: pink;

    }

     .row>div {

            height: 50px;

            background-color: pink;

            /* margin: 0 10px; */

     }

</style>

<body>

    <div class="container">

        <div class="col-md-4">

            <div class="row">

              <div class="col-md-6">a</div>

              <div class="col-md-6">b</div>

            </div>

        </div>

        <div class="col-md-4">2</div>

        <div class="col-md-4">3</div>

    </div>

</body>

4.5 栅格系统的列偏移



栗子1： 两个盒子贴边

<style>

    .container div {

        height: 50px;

        background-color: pink;

    }

</style>

<body>

    <div class="container">

        <div class="col-md-3">左侧</div>

         <!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->

        <div class="col-md-3 col-md-offset-6">右侧</div>

    </div>

</body>

栗子2： 盒子水平居中

<div class="container">

       <!-- 如果只有一个盒子 那么就偏移  = (12 - 6) /2 = 6 -->

        <div class="col-md-6 col-md-offset-3">中间</div>

    </div>

4.6 栅格系统列排序



栗子： 左侧右侧交换

没有排序之前：

 <div class="container">

        <div class="col-md-4">左侧</div>

        <div class="col-md-8">右侧</div>

    </div>

排序之后：

 <div class="container">

        <div class="col-md-4 col-md-push-8">左侧111</div>

        <div class="col-md-8 col-md-pull-4">右侧222</div>

 </div>

4.7 响应式工具



栗子：隐藏

<style>

    .row div {

            height: 300px;

            background-color: purple;

            color: red;

            font-size: 20px;

        }

   .row div:nth-child(3) {

            background-color: pink;

            color: red;

            font-size: 20px;

        }

</style>

<body>

    <div class="container">

        <div class="row">

            <div class="col-xs-3">1</div>

            <div class="col-xs-3">2</div>

            <div class="col-xs-3 hidden-md">我可是会隐藏的哦！！！</div>

            <div class="col-xs-3">4</div>

        </div>

    </div>

</body>

只在中等屏幕下隐藏，其他屏幕下不会隐藏

栗子：显示

<body>

    <div class="container">

        <div class="row">

            <div class="col-xs-3">

                <span class="visible-lg">我会显示哦</span>

            </div>

            <div class="col-xs-3">2</div>

            <div class="col-xs-3">3</div>

            <div class="col-xs-3">4</div>

        </div>

    </div>

</body>

span的文字只有在大屏才显示，其他屏幕下不显示

Bootstrap 的基本使用的更多相关文章

  1. 旺财速啃H5框架之Bootstrap（五）

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap（四）

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap（三）

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap（二）

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap（一）

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器，基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. 2018.1.22 js

    1.JavaScrip运算符 [案例]a+=b 等价于 a=a+ba-=b 等价于 a=a-ba*=b 等价于 a=a*ba/=b 等价于 a=a/ba%=b 等价于 a%=b2.逻辑控制语句语法1: ...

  2. 这 12 款 IDEA 插件你用过几款？

    搞 Java开发用什么软件,当然是神器idea了,那么,idea的插件对于你来说就是必不可少的了,不仅可以提高自己的编码效率,还可以减轻工作时的枯燥烦闷.接下来就来说说,我平时敲代码用的什么插件吧. ...

  3. IDEA “Cannot resolve symbol” 解决办法

    IDEA 无法识别同一个 package 里的其他类,将其显示为红色,但是 compile 没有问题.鼠标放上去后显示 "Cannot resolve symbol XXX",重启 ...

  4. DocView 现在支持自定义 Markdown 模版了！

    前言 有小伙伴反馈说希望可以自定义 Markdown 模版,这样就可以导出自己想要的样式了!这个功能可以有,毕竟大家不可能都生成一模一样的文档.现在来一起看看如何实现自定义模版吧! 设置模版 Sett ...

  5. Camtasia中对录制视频进行编辑——音效

    市场上有很多的视频处理软件,形形色色的软件往往会使人眼花缭乱,而对于那些短视频的制作者来说,拥有一款好的视频处理软件会让自己的视频收获更多的点赞.那么今天我便给大家推荐一款同时具有录屏和编辑视频功能的 ...

  6. 「CSP-S 2020」儒略日

    description luogu loj(暂无数据) solution 这道题作为T1,对选手们仔细看清题目的好习惯,以及不为2h调试.5k代码而心态爆炸的重要能力进行了较好的锻炼, 特别准备的只有 ...

  7. python基础之条件语句

    检查相等和不等 多个检查条件 age1 = 22 age2 = 19 s1 = age1 > 21 and age2 > 19 print(s1) s2 = age1 > 21 or ...

  8. 【R语言入门】R语言中的变量与基本数据类型

    说明 在前一篇中,我们介绍了 R 语言和 R Studio 的安装,并简单的介绍了一个示例,接下来让我们由浅入深的学习 R 语言的相关知识. 本篇将主要介绍 R 语言的基本操作.变量和几种基本数据类型 ...

  9. 电脑装MySQL免安装版配置失败提示系统错误2怎么解决?

    一·准备工作 我下载安装的版本是:mysql-8.0.16-winx64(免安装版) 下载地址:https://www.mysql.com/ (官网地址)https://cdn2.lmonkey.co ...

  10. SPG-Net: Segmentation Prediction and Guidance Network for Image Inpainting

    SPG-Net: Segmentation Prediction and Guidance Network for Image Inpainting pytorch 引言 利用语义分割获取空洞的边缘信 ...