BootStrap的栅格系统的基本写法（布局）

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>BootStrap的基础入门</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!--根据设备的宽度自动调整网页的大小 -->
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <script src="bootstrap/js/jquery-1.10.2.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body style="padding: 50px;background-color: #CCCCCC">
        <div class="container" style="padding:50px;background-color: #ffffff;">
            <div class="row">
                <div class="col-md-4" style="border: 1px solid red;height: 300px;">
                    BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义
                    BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义
                </div>
                <div class="col-md-8" style="height: 300px;">
                    <div class="row">
                        <div class="col-md-6" style="height: 150px;background-color: chocolate;">
                            要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，
                        </div>
                        <div class="col-md-6" style="height: 150px;background-color: azure;">
                            要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，
                        </div>
                    </div>
                    <!-- 嵌套栅格系统-->
                    <div class="row">
                        <div class="col-md-6" style="height: 150px;background-color: green;">
                            BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5
                        </div>
                        <div class="col-md-6" style="height: 150px;">
                            <div class="row">
                                <div class="col-md-6" style="height: 150px;background-color: #9966FF">
                                    BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的
                                </div>
                                <div class="col-md-6" style="height: 150px;background-color: #FFB94F">
                                   <div class="row">
                                        <div class="col-md-6" style="height: 75px;background-color: #0000C0">
                                            BootStrap
                                        </div>
                                        <div class="col-md-6" style="height: 75px;background-color: #DE8E30">
                                            BootStrap
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6" style="height: 75px;background-color: #01ff70">
                                            BootStrap
                                        </div>
                                        <div class="col-md-6" style="height: 75px;background-color: #14d1ff">
                                            BootStrap
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               <!-- <div class="col-xs-4 sr-only" >
                    BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此
                    BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此BootStrap的文档是基于HTML5的，因此，要使用HTML的文档类型定义BootStrap的文档是基于HTML5的，因此
                </div>-->
            </div>
        </div>
    </body>
</html>

时间： 2024-10-21 09:07:05

BootStrap的栅格系统的基本写法（布局）的相关文章

初识bootstrap框架栅格系统

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"/>

ASP.NET MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用源码下载:点我下载要做一个完整的系统,除了需要MVC这样的B/S框架及EF这样的数据库访问技术之外,一个简洁.美观.大方的UI框架也是必不可少的. 话不多说,有请今天的主角登场!! 看看它的自我介绍,是不是很屌.没错,这个介绍一点都不夸

MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

原文:MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用下一节:ASP.NET MVC5 + EF6 + Bootstrap3 (8) View中的HtmlHelper用法大全(上) 源码下载:点我下载

Layui栅格系统与后台框架布局

一.栅格布局规则: 1. 采用 layui-row 来定义行,如:<div class="layui-row"></div> 2. 采用类似 layui-col-md* 这样的预设类来定义一组列(column),且放在行(row)内.其中: 变量md 代表的是不同屏幕下的标记(可选值见下文) 变量* 代表的是该列所占用的12等分数(如6/12),可选值为 1 - 12 如果多个列的"等分数值"总和等于12,则刚好满行排列.如果大于12,多余的

Bootstrap(5)栅格系统

一．移动设备优先在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题. //分别为:屏幕宽度和设备一致.初始缩放比例.最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">一般在页面开头加上

bootstrap 学习笔记（1）---介绍bootstrap和栅格系统

学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得重点的东西写下来,以便以后学习. Bootstrap 是一个相应式的布局的一个前端框架.bootstrap 学习有以下步骤: 1.bootstrap 安装, 2.bootstrap 全局css 样式 3.bootstrap css组件 4.bootstrap javascr

深入理解bootstrap的栅格系统

今天这里主要是学习bootstrap 中的栅格系统,其实bootstrap主要是应用与响应式的,说到响应式大家都会想到媒体查询@media:没错这里的关键点那就是媒体查询@media(废话不多说了,直接进入正题): 媒体查询阈值(注意:例子中阈值都为默认值) 首先我们要知道bootstrap为我们提供了一套完整的流体栅格系统,而且随这屏幕或者视扣尺寸的增加,系统会制动分成最多12列记住最多12列,当然有人会问多出了怎么办?别急下面且看我给您慢慢道来: 首先了解一下bootstrap媒体查询的

Bootstrap之栅格系统

bootstrap 移动优先中文官网 http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge"&

巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加