bootstrap3入门一（栅格系统）

最新推荐文章于 2022-03-17 18:03:34 发布
最新推荐文章于 2022-03-17 18:03:34 发布
阅读量601 收藏 1
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012325403/article/details/51121986
版权
http://www.cnblogs.com/aehyok/tag/BootStrap前端设计/

一、bootstrap开发环境搭建
1. 下载bootstrap,  http://www.bootcss.com/
2.  下载jquery,  通过IE直接访问 http://code.jquery.com/jquery-2.0.3.min.js
3. 在html页面中导入bootstrap与jquery的js,css文件，.viewport的<meta>标签，这个标签可以修改在大部分的移动设备上面的显示，加如 if lt IE 9...等是为了在ie9               以下的兼容。
模板如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        
    </div>
</body>
</html>

二. 栅格系统。
1. boostrap把桌面分隔成 由12行 * n 列的表格进行布局， 这是boostrap进行而已的核心。
2. .row 进行行级划分，必须包含在 .container下。
3.  col-xx-*进行列级划分，如下图

<div class="container">
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3">2</div>
            <div class="col-md-3">3</div>
            <div class="col-md-3">4</div>
        </div>
        <div class="row">
            <div class="col-md-3">5</div>
            <div class="col-md-3">6</div>
            <div class="col-md-3">7</div>
            <div class="col-md-3">8</div>
        </div>
    </div>


4.列偏移， 通过 col-xx-offset-*来实现
    <div class="container">
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3">2</div>
            <div class="col-md-3">3</div>
            <div class="col-md-3">4</div>
        </div>
        <div class="row">
            <div class="col-md-3">5</div>
            <div class="col-md-3">6</div>
            <div class="col-md-3 col-md-offset-3">7</div>
        </div>
    </div>



   5. 列排序，能过.col-xx-push-* 和 .col-xx-pull-* 实现列的向左或向右排序
    <div class="container">
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3">2</div>
            <div class="col-md-3 col-md-push-3">3</div>
        </div>
        <div class="row">
            <div class="col-md-3">5</div>
            <div class="col-md-3">6</div>
            <div class="col-md-3 col-md-pull-2">7</div>
        </div>
    </div>


    6. 列嵌套， row嵌套在col中即可。
        <div class="row">
            <div class="col-md-3">1</div>
            <div class="col-md-3">2</div>
            <div class="col-md-3">3</div>
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-1">5</div>
                    <div class="col-md-1">6</div>
                    <div class="col-md-1">7</div>
                </div>
            </div>
        </div>



威哥V5
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap入门书籍之（三）栅格系统
09-02
主要介绍了Bootstrap入门书籍之（三）栅格系统的相关资料,需要的朋友可以参考下
Bootstrap3------栅格系统
qq_44216701的博客
05-04 383
1.什么是栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。 Bootstrap 中包含了许多预定义，在通常我们写的页面里，浏览器缩小到一定程度，页面会错位，变形，这在Bootstrap 中不会，因为它是自适应的。 响应式网格系...
Bootstrap 3 学习
weixin_45346719的博客
03-09 1227
http://getbootstrap.com/ 1.meta标签 <meta name="viewport" content="width=device-width, initial-scale=1.0"> width属性控制设备宽度，将它设置为device-width确保正确呈现在不同设备上 initial-scale确保网页加载时1:1呈现，不会缩放 在移动设备浏览器上 ，user-scalable=no 可以禁用其缩放（zooming）功能，通常maximum-scale=1.0 与
Bootstrap3 栅格系统
歪脖先生的博客
05-02 1010
栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 工作原理 Bootstrap栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格系统的工作原理如下： “行（row）”必须包含在 .container （固定宽度）或 .cont...
深入理解BootStrap Item7 -- 栅格系统（布局）
小平果的欢乐谷
11-14 7086
1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
Bootstrap框架——栅格系统
ln201009的博客
12-28 3680
1、首先，我们先进入vs。打开文件夹（文件夹需要提前在桌面上新建好），然后新建一个html文档，改一下title为Bootstrap框架。 2、打开桌面新建的文件夹，在js里面放入bootstrap所需要的css和js。 3、然后继续打开vs文件，去新建的html文件里边，用外部样式，引入bootstrap的css样式表。 4、再在body标签里边，引入bootstrap的js文件，我们先引入这些的原因是因为为引入bootstrap的插件做好准备工作，不然到后面出现问题很麻烦。接下来我们就
Bootstrap入门教程一Hello Bootstrap初识
01-19
Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的...
bootstrap入门.pptx
03-20
详细介绍boostrap的安装和引用方式，介绍关于boostrap的栅格布局，弹性布局，以及表单、图片等插件的使用
bootstrap入门（三）栅格系统
Old3的博客
08-09 3675
布局 在bootstrap中 响应式布局通过栅格系统达成的。 栅格系统主要构成元素 row 和 col （column） 有点像 Excel 单元格 一行最大允许12格的长度，超过12格长度就跳到下面一行 行定义用 &lt;div class="row"&gt;&lt;/div&gt; 列定义用 &lt;div class="col-针对哪种设备-长度"&gt;asdsa&lt;...
bootstrap--栅格系统详解（源码分析）
weixin_47942860的博客
03-17 2040
对bootstrap源码进行了简单的分析，通过递归可以实现响应式布局，以及介绍了栅格系统的精妙之处。1.bootstrap是什么？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
Bootstrap栅格系统原理
热门推荐
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 1万+
Bootstrap栅格系统原理 Bootstrap栅格系统布局 1、栅格系统简介 1）响应式设计 我们现实生活中所使用到的设备有手机、平板电脑、笔记本、台式机。这些设备最大的区别在于它的屏幕的大小不一样，也就是分辨率大小不一样。 响应式设计最核心的思想是就一个网站能够兼容多个终端，而不是为每个终端特定的一
Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色
weixin_33991727的博客
03-17 1194
  内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor   Visual Studio Code 1.32.1     typesetting   Markdown   code <!DOCTYPE html> ...
BOOTSTRAP4的栅格系统详解
李小砍的技术博客
02-25 2245
简介 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 网格类 Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px .col-lg- 大桌面显示器 - 屏...
Bootstrap3栅格系统布局实例
歪脖先生的博客
05-02 3806
布局实例 Bootstrap3栅格系统的核心理念是移动设备优先，其实也就是小设备优先。使用这些栅格类，再结合栅格系统的规则，就可以构建出千变万化的页面布局。 先看一个简单实例，来加深对移动设备优先的理解。假设我们只使用单一的一组 .col-md-* 栅格类来创建一个栅格系统： <divclass="row"> <divclass="col-md-4"&g...
bootstrap中的栅格系统详解
zzh1251994430的博客
11-03 1877
bootstrap中的栅格系统 简介 什么是栅格系统？ Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。（十二栅格系统） 原理 栅格系统通过行（row）与列（column）组成页面布局，页面内容就放入这些创建好的容器中。 使用规则 1.内容必须放在创建好的"container"容器中。 例： <!-- 容器 --> <div class="container"> <!-- 行 --&g
Bootstrap3 栅格系统之列排序
歪脖先生的博客
05-02 2531
列排序 Bootstrap 栅格系统中一个非常人性化的特性，就是使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序。push 将元素向右推动 * 指定的列数，pull 将元素向左拉动 * 指定的列数，* 的取值范围是从 1 到 11。 这个特性允许你以一种顺序定义列，然后以另一种顺序显示列，是对SEO非常友好的一个特性，深受SEO人员的喜爱。 假设一个页面...
Bootstrap栅格系统
xun__xing的博客
07-26 2017
栅格系统一、运作1.网格选项2.基本结构3.选择自适应类型1.container-fluid3.container二、应用1.设置等宽列，平分宽度2.设置多行等宽列，选择断行3.设置一个列宽，剩下的自动平分4.设置根据内容调整列的宽度5.设置所有尺寸下，都占同样的列数6.混合排列或者组合模式7.对齐1.行的对齐方式2.列的单独对齐方式8.列排序9.列偏移10.间距11.嵌套 一、运作 1.网格选项 即引入样式后，最多可将屏幕分为12栏，可再通过需求合并。 2.基本结构 首先要布置基本结构和公共的class
Bootstrap基本使用--栅格系统
qq_48113035的博客
03-03 997
一、栅格系统 1.布局容器 bootstrap有两个布局容器，container和container-fluid，container布局的宽度会发生变化；container-fluid布局的宽度总是100%，主要用于移动端。 2.container布局容器的宽度变化。 宽度像素范围 类前缀 container容器最大宽度 左右内边距 大屏幕（大桌面显示器） >=1200px .col-lg- 1170px 各15px 中等屏幕（桌面显示
用bootstrap写一个栅格系统
最新发布
05-25
好的，下面是一个基本的栅格系统示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bootstrap Grid System</title> <!-- 引入Bootstrap CSS文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4">1</div> <div class="col-md-4">2</div> <div class="col-md-4">3</div> </div> <div class="row"> <div class="col-md-6">4</div> <div class="col-md-6">5</div> </div> <div class="row"> <div class="col-md-12">6</div> </div> </div> <!-- 引入Bootstrap JS文件 --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html> ``` 这里使用了 Bootstrap 的栅格系统，把页面分为了 3 行和 5 列。其中，`.container` 是整个页面的容器，`.row` 是每一行的容器，`.col-md-*` 是每一列的容器，其中的 `md` 表示在中等屏幕上展示，`*` 表示占据屏幕的比例，一共有 12 格。 在上面的示例中，第一行有 3 列，每一列占据了屏幕的 4 格；第二行有 2 列，每一列占据了屏幕的 6 格；第三行有 1 列，占据了整个屏幕的 12 格。这样就实现了一个基本的栅格系统。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值