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

最新推荐文章于 2023-11-22 01:15:43 发布
最新推荐文章于 2023-11-22 01:15:43 发布
阅读量191 收藏
点赞数 1
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhanghaoliang/p/6294222.html
本文通过一个实例展示了如何使用BootStrap进行基础页面布局，包括不同屏幕尺寸下的响应式设计，以及嵌套栅格系统的应用。

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

代码如下：

<!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>

　　

转载于:https://www.cnblogs.com/zhanghaoliang/p/6294222.html

Web响应式布局—媒体查询—BootStrap框架及其使用
小琳爱分享的博客
07-29 605
Web响应式布局—媒体查询—BootStrap框架及其使用
BootStrap响应式项目实战之世界杯网页设计
张晨光老师的播客
11-18 4790
响应式布局：页面可以随着设备的变化而动态改变。 ​ 淘宝：pc端一套页面：不能随着屏幕的缩小而变化；​ 移动端：另外一套页面，可以随着屏幕的放大、缩小改变（m.taobao.com)阿里公司：财大气粗可以做多套页面。​ 苹果公司：一套页面，随着pc、pad、手机端多端变化而变化。优点：​ 1.适配多端；​ 2.页面简介缺点：​ 1.页面内容要更多，因为要适配不同的设备；​ 2.技术要求更广泛。中文网：https://v3.bootcss.com/[外链图片转存失败,
Bootstrap --手写栅格系统
Yannnnnm的博客
10-31 422
本篇文章主要从栅格系统的原理，以及栅格系统的一些应用来说明； 目录栅格系统原理我所理解的栅格系统栅格系统的应用总结 栅格系统原理 我们要了解栅格系统的原理，首先先看看官方文档的解释 官方文档这么解释他：栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局； 我们再来看看官方爸爸解释的原理： 这里方便大家看我们这里就直接偷了官方的文档解释截图； 官方的话可能不是那么通俗，那么栅格系统的原理到底是什么呢？ 我所理解的栅格系统 栅格系统是将一行等分成12份或者24份，分别根据每一行的每一
栅格系统的写法实践（响应式布局原理）——layui
蔡兵的专栏
10-27 2106
layui是非常流行的前端框架，其栅格系统可以帮助我们快速进行页面布局，并且实现响应式效果。 一、栅格系统的常规使用方式 以下是一个常规的栅格系统示例代码： <div class="layui-container"> 栅格系统示例： <div class="layui-row"> <div class="layui-col-xs3 layui-col-sm6 layui-col-md9 layui-bg-green">
bootstrap入门（三）栅格系统
Old3的博客
08-09 3804
布局 在bootstrap中 响应式布局通过栅格系统达成的。 栅格系统主要构成元素 row 和 col （column） 有点像 Excel 单元格 一行最大允许12格的长度，超过12格长度就跳到下面一行 行定义用 &lt;div class="row"&gt;&lt;/div&gt; 列定义用 &lt;div class="col-针对哪种设备-长度"&gt;asdsa&lt;...
参照bootstrap写的简单的栅格
lzjqq的专栏
06-14 157
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
BootStrap的table表格的基本写法
weixin_30701575的博客
01-17 171
代码如下： <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initi...
Bootstrap栅格系统使用方法及页面调整变形的解决方法
08-31
Bootstrap栅格系统是Bootstrap框架中的一个非常重要的组件，它可以帮助开发者快速地创建响应式页面布局。栅格系统的出现使得Bootstrap的跨设备布局显示变得可能。在Bootstrap栅格系统中，页面布局被划分为等宽的列...
简述Bootstrap中的栅格系统
最新发布
04-29
### Bootstrap 栅格系统的基本概念与使用方法 Bootstrap 的栅格系统是一种强大的布局工具，旨在帮助开发者快速创建响应式、移动优先的网页设计。以下是关于其基本概念和具体使用方法的详细介绍。 --- #### 一、...
bootstrap-移动WEB开发之响应式布局
curacaolb的博客
06-26 970
响应式布局学习目标 一个页面兼容了pc端，pad端，和手机端 响应式布局是不需要单独写移动端页面的 响应不同的设备发生不同的变化的，包括三端
栅格系统
steve1988717的博客
12-07 666
** meta 移动端优先的写法 ** width=device-width 这是告诉宽度为浏览设备的宽度 initial-scale=1 初始化为100%，就是一打开，文字就很大，不用双击变大文字 user-scalable=no 这是紧致用户缩放 这个meta标签也可以写为 ** 栅格系统 ** 注意： 1，栅格系统必须写在容器内；这里有两个容器类型 ...
bootstrap栅格布局五等分/八等分（参考Bootstrap的栅格写法）
Hao-Z-Y
10-09 5280
五等分： &lt;style type="text/css"&gt; .col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 { position: relative; min-height: 1px; margin-right: 10px; margin-left: 10px; } .col-xs-1-5 { width: 18%;...
bootstrap框架之栅格布局
runner_123的博客
03-21 2935
bootstrap框架之栅格布局1、使用bootstrap的框架时，CSS样式引用错误但浏览器不会检查出错误，所以可以使用一个bootlint工具。要加入文档，只需加入以下代码：javascript:(function(){var s=document.createElement("script");s.onload=function(){bootlint.showLintReportForCur...
栅格系统开发入门-基于Bootstrap
weixin_43203591的博客
08-18 330
应用场景 基于Bootstrap框架尝试栅格系统入门。 实现 效果 代码实现-基于Bootstrap <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
bootstrap简单样式
亦是此间少年的博客
08-01 382
** 媒体查询 ** 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。 下面我们来通过一个案例来讲解一下什么是媒体查询： <style> /* 当浏览器的宽度在 200到 699px，采用下面这个样式*/ @media screen and (max-width: 699px) and (m...
BootStrap框架
自动花钱机的博客
09-04 486
媒体查询，BootStrap框架-栅格系统，全局样式，组件，插件，模态框，模态框用法。将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格。通过data属性或JavaScript调用模态框插件，可以根据需要动态展示隐藏的内容。模态框弹出时还会为元素添加.modal-open类，从而覆盖页面默认的滚动行为，并且还会自动生成一个.modal-backdrop元素用于提供一个可点击的区域，点击此区域就即可关闭模态框。
Bootstrap栅格系统
h294590501的专栏
06-03 508
Bootstrap栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统， 随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 ​ 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局， 你的内容就可以放入这些创建好的布局中。 ​Bootstrap 栅格系统的特点：1_“行（row）”必须包含在 .container （固定宽度）或 ....
bootstrap栅格系统的实现
01-24 191
bootstrap提供了一个非常实用的栅格系统，可以实现响应式的网格布局，原理其实很简单，利用了float、百分比的宽度和@media的配合实现响应式，bootstrap默认把一行分为了12列，提供了xs、sm、md、lg四个不同的尺寸，而这四种尺寸其实是一样大的，只是在不同的页面宽度才会触发列的浮动，例如xs是最小的，不管页面多大都会触发列的浮动，而sm只有页面在768px以上才...
第二章 基础Bootstrap CSS
mlfc0422的博客
11-22 355
Bootstrap 不直接提供用于段落的类，但您可以使用 Bootstrap 的其他类来样式化段落内容。在 Bootstrap 中，列表（Lists）是网页设计中常见的元素，Bootstrap 提供了一些样式类来定制和排列列表的外观和布局。这个类可以帮助你去除列表默认的样式，比如默认的项目符号或数字编号，使列表看起来更加简洁，适用于某些特定的设计需求。例如，你可以使用 Bootstrap 的文本样式类来对段落进行样式化，比如设置文本颜色、字体大小、对齐等。标签用于创建引用块，可以用于突出显示引用的内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值