bootstrap基础学习二篇

最新推荐文章于 2021-04-23 23:41:04 发布
最新推荐文章于 2021-04-23 23:41:04 发布
阅读量102 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/wuheng1991/p/5220163.html
本文详细介绍Bootstrap的响应式网格系统，包括不同设备下的网格行为、基本结构、示例代码及高级用法如列重置、偏移、嵌套和排序等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这篇学习网格系统（Grid System）

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1.网格选项：

 超小设备手机（<768px）小型设备平板电脑（≥768px）中型设备台式电脑（≥992px）大型设备台式电脑（≥1200px）
网格行为一直是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的以折叠开始，断点以上是水平的
最大容器宽度None (auto)750px970px1170px
Class 前缀.col-xs-.col-sm-.col-md-.col-lg-
列 #12121212
最大列宽Auto60px78px95px
间隙宽度30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）		30px
（一个列的每边分别 15px）
可嵌套YesYesYesYes
偏移量YesYesYesYes
列排序YesYesYesYes

2.基本的网格结构：

    <div class="container">
       <div class="row">
          <div class="col-*-*"></div>
          <div class="col-*-*"></div>      
       </div>
       <div class="row">...</div>
    </div>
    <div class="container">....

3.示例一：

 <div class="container">
         <div class="row">
             <div class="col-xs-4" style="background:green;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

                 <div class="col-xs-4" style="background:#abcdef;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

             <div class="col-xs-4" style="background:#282828;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>
         </div>
         
         </div>

4.中型和大型设备

    <div class="col-md-6 col-lg-4">....</div>
    <div class="col-md-6 col-lg-8">....</div>

5.示例：

 <div class="container">
         <div class="row">
             <div class="col-xs-2 col-md-4" style="background:green;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

                 <div class="col-xs-4 col-md-4" style="background:#abcdef;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

             <div class="col-xs-6 col-md-4" style="background:#282828;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
              </p>
             </div>
         </div>
         
         </div>

6.适应于：手机、平板电脑、台式电脑

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

7.示例：

<div class="container">
         <div class="row">
             <div class="col-xs-1 col-sm-5 col-md-8 col-lg-9" style="background:green;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

                 <div class="col-xs-2 col-sm-5 col-md-2 col-lg-1" style="background:#abcdef;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat. 
              </p>
             </div>

             <div class="col-xs-6 col-sm-2 col-md-2 col-lg-2" style="background:#282828;">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            
              </p>
             </div>
         </div>
         
         </div>

8.响应式的列重置

使用：

<div class="clearfix visible-xs"></div>解决小设备浏览时无法确定网格显示的位置。

9.代码示例：

 <div class="container">
         <div class="row">
             <div class="col-xs-2 col-sm-3" style="background:green;">
                  
            nisi ut aliquip ex ea commodo consequat.
             </div> 

             <div class="col-xs-6 col-sm-3" style="background:pink;">            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
             </div> 
            
            <div class="clearfix visible-xs"></div>

             <div class="col-xs-6 col-sm-3" style="background:blue;">
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
             </div> 

             <div class="col-xs-6 col-sm-3" style="background:gray;">            
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.
             </div> 

         
         </div>
     </div>

10.偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。

例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。

这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

11.示例：居中效果

<div class="container">
         <div class="row">
              <div class="col-xs-6 col-xs-offset-3" style="background:#abcdef;">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.Lorem ipsum dolor sit amet, consectetur adipisicing 
                    elit.
                 </p>
              </div>
         
         </div>
     </div>

12.嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。

被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

13.示例：

 <div class="container">
         <div class="row">
              <div class="col-xs-2" style="background:yellow;">
                   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
              </div>

              <div class="col-xs-10" style="border:1px solid red;">
                  <div class="row">
                      <div class="col-xs-5" style="background:#abcdef;">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                      </div>

                      <div class="col-xs-7" style="background:#fedcba;">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                      </div>

                  </div>
                  
                  <div class="row">
                      <div class="col-xs-10" style="background:blue;">
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                      </div>
                  </div>
              </div>
         
         </div>
     </div>

14.列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

15.示例：

<div class="container">
         <div class="row">
           <p>排序前：</p>
           <div class="col-xs-4" style="background:green;">
               this is a test!
           </div>

           <div class="col-xs-8" style="background:#abcdef;">
               this is a demo!
           </div>
                
         </div>

         <br>
         <div class="row">
             <p>排序后：</p>
             <div class="col-xs-4 col-xs-push-8" style="background:red;">
                 this is a test!
             </div>
             <div class="col-xs-8 col-xs-pull-4" style="background:yellow;">
                 this is a demo!
             </div>
         </div>

     </div>

 

转载于:https://www.cnblogs.com/wuheng1991/p/5220163.html

bootstrap方法_自助法（bootstrap）在统计检验中的应用及R语言实现过程
weixin_39609670的博客
11-28 2万+
Bootstrap(自助法、自举法)是非参数统计中一种重要的估计统计量方差，进而进行区间估计的统计方法。Bootstrap通过对给定数据集进行有放回的重抽样以创建多个模拟数据集，生成一系列待检验统计量的经验分布，可以计算标准误差、构建置信区间并对多种类型的样本统计信息进行假设检验。Bootstrap无需假设一个特定的理论分布，便可生成统计量的置信区间并能检验统计假设，更易于理解以及适用于...
bootstrap再抽样_Bootstrap再抽样方法简介
weixin_31289551的博客
12-24 3566
近年来，许多数理统计方法被引入到医学研究中，有些理论在大样本的条件下才能获得稳定的解，如项目反应理论、线性状态空间模型等。但是在实际中．由于成本或者现场条件的限制而无法获得大样本。在现有样本代表性好的条件下，可以通过Bootstrap再抽样方法扩大样本量．即在传统的数理统计基础上进行统计模拟。随着计算机技术的迅猛发展，这一技术已经渗透到许多科学领域．解决了无法采集到大样本的难题。目前医学中常用的统...
【周记】汇总Bootstrap表单等知识
Mr.Cheng的博客
03-30 486
1、禁用按钮，有两种格式：1、利用disabled属性可以制作一个禁用的按钮；<div class="container"> <p> disabled 属性可制作一个禁用的按钮：</p> <button type="button" class="btn btn-default" disabled="disabled">禁用的默认按钮</button>
计算机实习周记
03-04
软件方面，计算机专业,软件工程方面的实习周记和实习报告，借鉴参考
Bootstrap一周学习小结
weixin_30484247的博客
11-30 208
一、响应式布局 1、bootstrap是自适应mobile和web，会根据分辨率大小而自适应的一个代码库，Bootstrap定义了很多js和css的效果，把这些效果集成为多个API，供在使用时调用。 2、在用bootstrap做基本的页面也要在head标签内引用bootstrap的库，bootstrap的js库是以jQuery为核心的 <meta name="viewport" c...
bootstrap源码分析系列：二，栅格和响应式布局
zzc1684的博客
06-14 223
bootstrap把response单独分开作为一个独立模块这样整个栅格系统实际上分为了栅格grid和响应式布局response。非响应式的栅格是940固定宽度的，并且分为固定和流式两种，响应式布局就是通过media query增加了对不同屏幕宽度的适应。布局上，通过容器的负padding-left和每一个列的margin-left来实现的，如下图所示： 一，定宽栅格的实现 在varia...
bootstrap基础知识学习笔记
09-01
Bootstrap 基础知识学习笔记主要涵盖了以下几个核心概念： 1. **引入 Bootstrap**：在 HTML 文件中，你需要引入 Bootstrap 的 CSS 和 JavaScript 文件。这通常包括 jQuery（因为 Bootstrap 的某些组件依赖于它）。...
Bootstrap基础学习
09-03
【Bootstrap基础学习】 Bootstrap是前端开发领域广泛应用的开源框架，由Twitter的设计师Mark Otto和Jacob Thornton共同创建。这个框架主要基于CSS和HTML，同时也包含了JavaScript（JQuery）组件，为Web开发者提供了...
BootStrap入门学习第一篇
12-02
这篇“BootStrap入门学习第一篇”旨在引导初学者了解如何开始使用这个强大的工具。以下是主要的知识点： 1. **环境搭建**： - 首先，你需要从BootStrap的中文官方网站（http://www.bootcss.com）下载最新的...
Bootstrap3.0学习笔记之入门篇
09-22
Bootstrap是一个流行的前端框架，由Twitter开发，目的是为了简化网页设计和开发过程。...Bootstrap3.0是该框架的一个重要版本，提供了...通过这些知识点的学习，可以为后续深入学习Bootstrap的高级特性打下坚实的基础。
阅读《深入理解bootstrap》一书，留点痕迹
一个程序员的人生
02-09 1239
最近又想阅读这本书，主要是我要做分享一个。起初读了书的第一/二章后，学到了以前一直没有理解的几个问题。在这里记录一下：         这段文字誊抄书中原文，看起来就像干活：         关于本书的内容，这里再多说几句。首先，组件（或插件） 是用来使用的，而架构思想是用来理解和创建组件（或插件）、 解决疑难杂症的，所以读完本书以后，你可能得到两种结果。 结果1　组件和插件都会使用了，但
Bootstrap学习（第三节）
qq_36142336的博客
07-10 354
在上一节中已经看到，Bootstrap将屏幕分为12列，这其实就是网格系统（Grid System）。 网格系统的内容主要分为4个部分：响应式的列重置、偏移列、嵌套列以及列排序。 响应式的列重置：这个很容易理解，上一节的末尾有个图片，上面有着不同设备的col-xx-n的xx的值，所谓列重置，就是在编写代码的时候就对不同的屏幕大小做的处理，如下面这个例子所示： 这样一来，在xs和sm两
机器学习：Bootstrap
梦里水乡的专栏
12-13 9072
Bootstrap 最近在看一篇论文 Training Deep Nets with Imbalanced and Unlabeled Data，主要是讲通过一种欠采样的方法解决DBN网络中数据不均衡的问题。其间该论文提出了一种解决方法，具体步骤如下 (i) compute an entropy-based measure on ultrasound images;  (ii) se
bootstrap 检验 法 原理_Stata：刀切法/留一法/Jackknife 简介
weixin_39895283的博客
10-22 3106
连玉君 (中山大学，arlionn@163.com)陈鑫梅 (暨南大学，1562922593@qq.com) 空间计量专题课程1. 引言当你在做研究时，不知道是否有过这样的经历：花了好长时间想出来一个好 idea，但却发现搜集数据存在困难，比方说进行一次抽样的成本较高，再进行一次抽样不太可能实现…… 总之，你无法做到对总体进行多次重复的抽样，也就是说你无法通过统计样本对总体进行推断。本文...
bootstrap基础学习六篇
weixin_34082854的博客
02-26 86
bootstrap按钮 类 描述 .btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式（未被操作） .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning ...
一套不错的基于Bootstrap的博客系统静态页面
weixin_34198797的博客
02-27 995
2019独角兽企业重金招聘Python工程师标准>>> ...
第五周学习周记——学习BootStrap
jix_Hu的博客
04-23 405
第五周学习周记前言一、BootStrap样式1. BootStrap表格2. BootStrap按钮3. BootStrap图片二、BootStrap组件和插件1. 导航栏2. 页面标题3. 列表组4. 多媒体对象总结 前言 在上一周初步了解了BootStrap的基本介绍后，这一周将进一步学习BootStrap的相关内容。 一、BootStrap样式 Bootstrap支持以两种方式显示代码： 第一种是code标签，用来内联显示代码； 第二种是pre标签，用来显示为一个独立的块元素或者代码有多行。 1.
Bootstrap 学习笔记(一）
qq_40308150的博客
09-25 236
基于angular框架 div class="row"> table> thead> tr> th>数值th> tr> thead> tbody> tr> td>{{item.csum|number:'1.0-2'}}td> tr> tbody> table> di
Stata：Bootstrap 简介
热门推荐
Stata连享会
02-27 3万+
  作者： 吴雄(湘潭大学)，童天天(中南财经政法大学) Stata 连享会： 知乎 | 简书 | 码云   Source: The Bootstrap in Stata   连享会：内生性问题及估计方法专题 Stata连享会   计量专题 || 精品课程 || 简书推文 || 公众号合集   1. bootstrap 简介 bootstrap 是一种崭新的增广样本统计方法，为...
Bootstrap插件与基础教程学习资源合集
Bootstrap学习资料2这一文件集合，为我们提供了一系列与Bootstrap相关的学习材料。针对这些材料，我们可以提炼出以下几个知识点： ### Bootstrap框架核心概念 Bootstrap是一套流行的前端开发框架，它基于HTML、CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值