Bootstrap 基本样式-栅格布局

最新推荐文章于 2023-03-13 00:53:22 发布
最新推荐文章于 2023-03-13 00:53:22 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： 前端-Bootstrap

用来做自适应的，当屏幕宽度不一样的时候，会自动分成不同的等分
  • 栅格系统

    运用Bootstrap的栅格系统，可以做出像table那样定义多少行，多少列效果，但是又比table灵活。
    运用Bootstrap的栅格系统，首选需要准备一个class=container的div
    紧接着需要一个class=row的 div，表示行
    再挨着的div，就是列了。

    Bootstrap的栅格系统会默认把一行，分成12列。

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
   
div.container div.row div {
    margin:5px 0px;
     
}
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-12 ">一共12列</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
        <div class="col-xs-1 ">1列</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
        <div class="col-xs-4 ">占4列</div>
    </div>
</div>
  • 一半，1/3， 1/4

    根据栅格系统的规划，要实现一半，1/3,1/4的布局，就很容易实现了。

    注：一行不是必须添满的，比如第3行，只填了3个 1/4，最后一个1/4就可以空着

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
 
<style>
 
div.container div.row div {
    margin:5px 0px;
     
}
 
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
 
<div class="container">
    <div class="row">
        <div class="col-xs-6 ">一半</div>
        <div class="col-xs-6 ">一半</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
        <div class="col-xs-4 ">1/3</div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
        <div class="col-xs-3 ">1/4</div>
    </div>
</div>
  • 自动换行

    当同一行的栅格总数超过12的时候，就会自动换行

    <!DOCTYPE html>
<script src="js/jquery/2.0.0/jquery.min.js"></script>
<link
    href="css/bootstrap/3.3.6/bootstrap.min.css"
    rel="stylesheet">
<script
    src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
  
<style>
  
div.container div.row div {
    margin:5px 0px;
      
}
  
div.container div.row div {
    background-color: lightgray;
    border: 1px solid gray;
    text-align:center;
}
</style>
  
<div class="container">
    <div class="row">
        <div class="col-xs-6 ">一半</div>
        <div class="col-xs-6 ">一半</div>
    </div>
</div>
 
<div class="container">
    <div class="row">
        <div class="col-xs-8 ">8格</div>
        <div class="col-xs-6 ">6格</div>
    </div>
</div>

























litengbin
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
九宫格ui后台模板
04-01
九宫格ui后台模板
Bootstrap、栅格系统布局
m0_68618659的博客
08-18 8436
组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在—起就构成了组件，通过组件可以为用户提供某些特定的功能。组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。...
Bootstrap-栅格实例（二）
dengfengling999的博客
11-20 822
yann移动到第一个：class样式添加： col-md-pull-8 据right 往左移动2个位置 8(2*4) 个单位。webpack的calss添加：col-sm-push-6 此时缩小到sm 据left 往右移动1个位置 12/2=6。react的class添加：col-sm-pull-6 此时缩小到sm 据right 往左移动1个位置 6个单位。第二个跟第三个换一换：第二个class添加：col-lg-push-3 据左边移动3个单位，往右移一个位置。
Bootstrap之栅格布局
青春木鱼的博客
11-03 1482
Bootstrap提供了.cintainer和.container-fluid两种容器布局。这两种样式是启用布局栅格系统最基本的要素。.cintainer是固体自适应方式，.container-fluid是流体100%自适应方式。容器布局可以嵌套，但一般不推荐使用。Bootstrap是以移动端优先的
Bootstrap 之栅格系统与常用样式
weixin_50828895的博客
01-19 3189
一、Bootstrap简介 Bootstrap来自Twitter(推特)，是目前最受欢迎的前端框架，Bootstrap是基于HTML,CSS和JavaScrpit 的，它简洁灵活，使得web开发更加快捷。 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 优点 标准化的html+css编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈，不断的更新迭代 让开发更简单，提高了开发的效率 二、Bootstrap 栅格系统 1、栅格系统
bootstrap-4.0.0-beta.2.zip
11-20
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。 Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展...
bootstrap栅格系统响应式布局
02-05
bootstrap栅格系统响应式布局，根据浏览器不同宽度进行自适应地样式响应调整，使pc、平板、手机三端不同风格完美融合~
BootStrap整体框架之基础布局组件
01-19
在12栅格系统上基础上，BootStrap还提供了多种基础布局组件。 CSS组件，总结为8大类型的样式： 基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式 1.1基础样式 基本...
基于BootStrap栅格栏系统完成网站底部版权信息区
08-31
网站底部版权信息区可以用bootstrap的“栅格系统”完成，下面给大家分享一个未经处理的底部版权信息区的样式，大家可以做个参考
bootstrap栅格系统
06-21
栅格系统 更好地帮助你学习前端
Bootstrap实现的经典栅格布局效果实例【附demo源码】
11-28
本文实例讲述了Bootstrap实现的经典栅格布局效果。分享给大家供大家参考，具体如下： 先来看看效果图： 具体代码如下（某管理系统的Bootstrap实现）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="tex
Bootstrap实战---成长平台(栅格布局)
Season CSDN博客
07-20 282
Bootstrap实战—成长平台(栅格布局) 目标布局 我的布局：不含JS和CSS特效 我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-wid..
bootstrap栅格布局之花样样式布局
qq_40372395的博客
08-07 627
在这两天重新写一个关于响应式部分的前端页面，有了一些新的总结，希望可以帮到那些被bootstrap玩死的你。。。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;
Bootstrap栅格布局
戴维学长
03-13 571
【代码】Bootstrap栅格布局。
深入理解BootStrap Item7 -- 栅格系统（布局）
小平果的欢乐谷
11-14 7082
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
bootstrap栅格布局
ElyXiOn的博客
07-27 540
bootstrap栅格布局
Bootstrap（bootstrap的栅格系统、bootstrap的布局容器）
m0_46420078的博客
02-03 5834
一、bootstrap的栅格系统 用固定的格子进行网页布局，又称为网格布局 1、响应式栅格系统 使用响应式栅格系统进行页面布局时，网页根据不同的显示终端展示不同的页面结构。 例如，在校屏幕上由某些模块将按照不同的方式排列或者被隐藏。 2、创建使用响应式栅格系统页面的步骤（1）创建html页面 定义页头、导航、主要内容、侧边栏和页尾部分的HTML结构代 码（2）编写css样式 页头和页尾分别显示在网页的最上方和最下方，而中间的导航、主要内容和侧边栏根据浏览器窗口的大小...
bootstrap九宫格布局，点击其中一个DIV，弹框显示其内容
热门推荐
ankora的博客
10-20 1万+
bootstrap 业务员 出单量 总保费 aaaaaaa bbbbbbbb ccccccccc aaaaaaa
原神九宫格拼图游戏ES6+bootstrap+cookie
weixin_44453019的博客
11-25 3102
项目说明： 本项目是一个拼图游戏项目，使用了ES6语法、解构、Bootstrap、Cookie ， 完成的功能如下： 1、点击 「开始游戏」 按钮，计时开始并能点击图片进行移动 2、点击「再次挑战」按钮，可以随机重置本次拼图 3、点击「更换图片」按钮，可以切换拼图图片 4、点击「查看记录」按钮，可以查看当前最快记录 5、点击「项目说明」按钮，就能看到这些字了 6、拼图位置由随机生成的二维数组决定，对该数组进行了是否可以被还原的判断，确保每次拼图的位置都是可以还原的 7、判断拼图是否可还原算法简单说明： 　　
bootstrap栅格sae
最新发布
09-13
Bootstrap栅格系统是一种响应式的网格布局系统，用于在不同的屏幕尺寸下，自动适应和排列网页内容。它基于行（row）和列（column）的概念来构建页面布局。 在你提供的示例代码中，使用了Bootstrap的列偏移（column ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值