bootstrap学习笔记--bootstrap布局方式

最新推荐文章于 2025-03-04 08:01:21 发布
转载 最新推荐文章于 2025-03-04 08:01:21 发布 · 306 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://www.cnblogs.com/suzhiyong1988/p/5105417.html

Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

  • 内容
    • 决定什么是最重要的。
  • 布局
    • 优先设计更小的宽度。
    • 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
  • 渐进增强
    • 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。如下图：

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

  • 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
  • 使用行来创建列的水平组。
  • 内容应该放置在列内，且唯有列可以是行的直接子元素。
  • 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
  • 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
  • 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用，用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内。

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

媒体查询有两个部分，先是一个设备规范，然后是一个大小规则。在上面的案例中，设置了下列的规则：

让我们来看下面这行代码：

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

对于所有带有 min-width: @screen-sm-min 的设备，如果屏幕的宽度小于 @screen-sm-max，则会进行一些处理。

网格选项

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

 超小设备手机（<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

 

 

 

 

 

 

 

 

 

 

基本的网格结构

下面是 Bootstrap 网格的基本结构：

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

下面是个具体代码实例：

<div class="container">
        <h1>Hello, world!</h1>
        <div class="row">
            <!--超小设备手机（<768px） -->
            <div class="col-xs-1" style="background: #f00">1</div>
            <div class="col-xs-1" style="background: #b2b0b0">2</div>
            <div class="col-xs-1" style="background: #ff6a00">3</div>
            <div class="col-xs-1" style="background: #ffd800">4</div>
            <div class="col-xs-1" style="background: #4cff00">5</div>
            <div class="col-xs-1" style="background: #0ff">6</div>
            <div class="col-xs-1" style="background: #0094ff">7</div>
            <div class="col-xs-1" style="background: #b200ff">8</div>
            <div class="col-xs-1" style="background: #ff00dc">9</div>
            <div class="col-xs-1" style="background: #ff006e">10</div>
            <div class="col-xs-1" style="background: #ac5050">11</div>
            <div class="col-xs-1" style="background: #54bd4f">12</div>
        </div>
        <div class="row">
            <!--小型设备平板电脑（≥768px） -->
            <div class="col-sm-4" style="background: #b2b0b0">1</div>
            <div class="col-sm-4" style="background: #ffd800">1</div>
            <div class="col-sm-4" style="background: #ac5050">1</div>
        </div>
        <div class="row">
            <!--中型设备台式电脑（≥992px） -->
            <div class="col-md-4" style="background: #ac5050">1</div>
            <div class="col-md-8" style="background: #54bd4f">1</div>
        </div>
        <div class="row">
            <!--大型设备台式电脑（≥1200px） -->
            <div class="col-lg-8" style="background: #ac5050">1</div>
            <div class="col-lg-4" style="background: #54bd4f">1</div>
        </div>
    </div>

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1到 11。

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 div。

<div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-offset-3"
                style="background-color: #dedef8;">
                <p>
               测试偏移列---此处往右偏移了3列
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-1" style="background: #f00">1</div>
            <div class="col-xs-1" style="background: #b2b0b0">2</div>
            <div class="col-xs-1" style="background: #ff6a00">3</div>
            <div class="col-xs-1" style="background: #ffd800">4</div>
            <div class="col-xs-1" style="background: #4cff00">5</div>
            <div class="col-xs-1" style="background: #0ff">6</div>
            <div class="col-xs-1" style="background: #0094ff">7</div>
            <div class="col-xs-1" style="background: #b200ff">8</div>
            <div class="col-xs-1" style="background: #ff00dc">9</div>
            <div class="col-xs-1" style="background: #ff006e">10</div>
            <div class="col-xs-1" style="background: #ac5050">11</div>
            <div class="col-xs-1" style="background: #54bd4f">12</div>
        </div>
    </div>

显示效果：

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

<div class="container">
        <div class="row">
            <div class="col-xs-4" style="background: #b2b0b0">第一列</div>
            <div class="col-xs-8" style="background: #dedef8">第二列--里面嵌套了四个DIV
                <div class="row">
                    <div class="col-xs-6" style="background: #0094ff">我是内容一<br /><br /><br /></div>
                    <div class="col-xs-6" style="background: #b200ff">我是内容二</div>
                </div>
                <div class="row">
                    <div class="col-xs-6" style="background: #ff00dc">我是内容三<br /><br /><br /></div>
                    <div class="col-xs-6" style="background: #ff006e">我是内容四</div>
                </div>
            </div>
        </div>
    </div>

显示效果：

列排序

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

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

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

<div class="container">
        <div class="row">
            <div class="col-xs-4 col-md-push-8" style="background: #ff00dc">左边</div>
            <div class="col-xs-8 col-md-pull-4" style="background: #ff006e">右边</div>
        </div>
    </div>

显示效果：

转载于:https://www.cnblogs.com/suzhiyong1988/p/5105417.html

abn1122
关注
【转载】bootstrap自定义样式-bootstrap侧边导航栏的实现
学习 记录 总结 分享
02-28 2183
bootstrap自带的响应式导航栏是向下滑动的，但是有时满足不了个性化的需求:侧滑栏使用定位fixed使用bootstrap响应式使用工具类 visible-sm visible-xs hidden-xs hidden-sm等对不同屏幕适配
bootstrap 查询条件布局
ligengdipan的专栏
12-23 3274
效果如下： 代码： <div class="container-fluid"> <div class="row"> <div class="panel panel-default"> <div class="panel-head...
Bootstrap实战 - 瀑布流布局
除除的博客
12-05 4415
讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。
Bootstrap布局（一）
m0_69034993的博客
09-29 2946
当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。视口（Viewport）最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。
bootstrap第二章：bootstrap布局
qq_62244121的博客
10-17 5428
bootstrap布局详细介绍，附有网格列偏移和网格列嵌套
CSS常见适配布局方式
警警的博客
10-29 1852
流式布局，也称为百分比布局，使用百分比来定义元素的宽度和高度，而不是固定的像素值。这种方式使页面能够根据浏览器窗口的大小自动调整，从而实现响应式设计。
移动端有哪些常见布局方式？
nemunemu的博客
06-05 1万+
 大家好，我是IT修真院深圳分院第九期的学员徐炜，一枚正直、纯洁、善良的前端程序员。 今天给大家分享一下，修真院官网css任务13，深度思考中的知识点——移动端有哪些常见布局方式？ 1.背景介绍 随着智能手机的普及以及社会的发展，传统的网站布局已经无法适应现状，我们编写的网页不仅仅要展示在电脑上， 也要展示在移动设备上，而移动设备种类繁多，苹果、小米、三星等等，各个手机的屏幕大小不一，一般的电脑端...
【Bootstrap5】Bootstrap5学习笔记
最新发布
一只爱做笔记的码农
03-04 502
学完Blazor以后，我自己用这个写了一个小工具，但是我发现自己对前端粗浅的认知确实很难把UI层的组件弄出我想要的样子，所以我思来想去决定再把前端知识补一补.记录基于菜鸟教程的Bootstrap5教程，然后有些不清楚的我还补充一些AI说的知识。
【前端布局篇】响应式布局 Bootstrap 移动端布局
前端知识分享喵
06-20 8695
布局:layout 对事物的全面规划和安排页面布局：对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。网页布局：利用html搭建结构与内容，使用CSS添加装饰网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。**注：**所有的页面布局都是基于盒子模型基础之上进行布置。响应式布局是 Ethan Marcotte 在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。
超实用！网站导航栏设计方法总结
热门推荐
qq_40543535的博客
12-28 4万+
导航对于一个网站来说，起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ，让用户清晰明了的了解到网站的结构框架，起到重要的指引作用。下面跟大家分享下常用的几种网页导航形式： 1、顶部导航 顶部导航被广泛应用在各个领域的网站当中，这类导航可以一目了然的让用户迅速寻找到所需。顶部导航这样的设计形式保守但目的性强，可以确保组织结构的可靠和降低用户寻找的时间成本。但这类导航有个缺点，
[学习笔记]el-menu自适应动态数据
iufesjgc的博客
09-15 3608
element上的menu给的案例有点乱，而且数据是写死的，我做了一点点优化，可以自适应导航列表数据。（我因为需求，设置的导航层数最多为三层，所以严格来说也不算是完全能复用，应该是可以优化为不限制层数的） 首先，最外menu标签 <el-menu default-active="2" @open="handleOpen" @close="handleClose" background-color="#ebf1f6" text-color="#606266" active-
Bootstrap入门（二）：基本布局
weixin_30614587的博客
07-17 177
1.要实现的基本布局需求 分析： 整个页面共可分为四大部份 顶部菜单 （标记为1）：菜单 中部左边列表（标记为2）：三个样式一致的列表项 中部右边部件（标记为3）：三个样式差异的部件 底部描述（标记为4）：版本等描述 2.开始布局 基本结构： 针对1的布局需求，基本上是三层布局，在Body中定义四个版块。其中2、3版块由于是属于中部，故由...
BootStrap查询条件布局 卡片card 面板panel 工具栏 标题栏
tanzongbiao的专栏
03-15 1718
卡片card 示例1： <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div th:include="common::common...
WEB前端网页设计-Bootstrap5 侧边栏导航（Offcanvas）& JavaScript 事件
君逍遥o
05-02 6077
WEB前端网页设计-Bootstrap5 侧边栏导航（Offcanvas）& JavaScript 事件
深入理解Bootstrap布局
qq_43733543的博客
09-26 1636
Bootstrap 是由 Twitter 开发并开源的前端框架。它包含了HTML、CSS 和 JavaScript 组件，可以简化开发过程，提升开发效率。Bootstrap 的核心是其响应式网格系统，可以轻松创建适应不同设备和屏幕大小的布局。
bootstrap常用的几种布局
m0_56565958的博客
03-12 1257
五、弹性布局（rem/em布局）：使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。三、自适应布局（Adaptive Layout）：自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。2、优点：这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式。
Bootstrap实战---footer处理
Season CSDN博客
07-09 2045
Bootstrap实战—footer处理 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&
Bootstrap的行、列布局设计(网络-网格系统设计)
昊虹AI笔记
09-05 4023
Bootstrap的行、列布局设计(网络系统设计)
五、Bootstrap之菜单栏和导航栏
Itcodewizard的博客
05-14 4534
本文主要学习 Bootstrap 中提供的菜单栏和导航栏组件的使用方法和样式，按照 Bootstrap 的规范正确构建菜单栏和导航栏的 HTML 结构。Bootstrap 类：熟悉并正确应用 Bootstrap 的类名，如.navbar.nav.nav-item.nav-link等。响应式设计：学习如何使用 Bootstrap 的响应式工具类来确保菜单栏和导航栏在不同屏幕尺寸下的良好显示效果。1、通过在代码编辑器中实际编写代码，尝试创建不同样式的菜单栏和导航栏，加深理解和熟练应用；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值