Bootstrap布局

最新推荐文章于 2023-11-14 15:17:35 发布
原创 最新推荐文章于 2023-11-14 15:17:35 发布 · 386 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用Bootstrap布局，强调了container和container-fluid的区别，以及栅格系统的应用。Bootstrap布局依赖于container类作为容器，提供居中显示的效果，而container-fluid则实现全宽布局。Bootstrap的网格系统基于12列，允许灵活地定义列的宽度，创建响应式布局。

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


开发工具与关键技术：Visual Studio 

作者：胡宁淇

撰写时间：2019年5月24日

我们要使用bootstrap布局第一件事就是引用bootstrap.min.css文件，如下图所示
在这里插入图片描述

Bootstrap.min.css文件是通过class进行调用，使用bootstrap布局首先要给它一个容器，在bootstrap中有两种容器，一种是container，一种是container-fluid，这两种容器是使用bootstrap布局必不可少的条件，container和container-fluid的区别在于如下图。Container没被嵌套在最外层在浏览器中的显示效果是居中显示。
在这里插入图片描述
container-fluid可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）。
在这里插入图片描述
在容器里面我们使用的是栅格布局，也叫做行列布局，这里面我们用到做多的类就是row和col，row是行，col是列。Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局，也就是说把一个div分成12份，如下图

在这里插入图片描述
在这里插入图片描述
在一行中有三列，如果没有指定这一列要占几份，那么这三列就是等分的，也就是说这三列每列占4份，如果指定了一列要占几份，那么剩下的份数由另外两列平分，如下图在这里插入图片描述

bootstrap布局（一）
鲸鱼姐的专栏
05-15 620
boostrap布局 先介绍下bootstrap简单的结构 Container-》row-》column <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>Title</title> </head> ...
BootStrap基础，布局
weixin_30339457的博客
08-20 263
BootStrap基础 1 什么是BootStrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 2 BootStrap的版本 BootStrap2 BootStrap3 BootStrap4 3 BootStrap 下载 ...
Bootstrap布局（一）
m0_69034993的博客
09-29 2872
当移动端浏览器展示PC端网页内容时，由于移动端设备屏幕比较小，布局视口不能像PC端浏览器那样完美地展示网页，网页在手机的浏览器中会出现左右滚动条，用户需要左右滑动才能查看完整的一行内容。视口（Viewport）最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页，它是浏览器显示页面内容的屏幕区域。视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。
Bootstrap的行、列布局设计(网络-网格系统设计)
昊虹AI笔记
09-05 3870
Bootstrap的行、列布局设计(网络系统设计)
Bootstrap 页面布局
11-26 3410
Bootstrap 网格系统（Grid System）的工作原理 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .
bootstrap布局模板
08-02
在Bootstrap布局中，有几个核心概念和技术值得深入理解： 1. **栅格系统**：Bootstrap的栅格系统是其布局的核心，它基于12列的网格模型，允许开发者通过简单的类来创建响应式的页面布局。你可以通过调整列的数量和...
Bootstrap布局的网站首页DEMO
10-03
Bootstrap布局的网站首页DEMO是一个基于Bootstrap前端框架构建的示例页面，主要用于展示如何利用这个流行的响应式设计工具来创建一个高效、美观且适应各种设备的网站主页。Bootstrap是由Twitter开发并开源的一个强大...
bootstrap布局可视化可拖拽
05-25
"bootstrap布局可视化可拖拽"这个主题指的是使用Bootstrap配合某些可视化工具或插件，实现布局元素的拖放功能，从而让开发者可以直观地调整网页布局。 Bootstrap的基础布局系统依赖于网格（Grid System），它将页面...
bootstrap布局
12-07
在“bootstrap布局”这个主题中，我们主要关注的是如何利用Bootstrap来设计和实现高效且美观的网页布局。 Bootstrap的核心是其12列的网格系统。这个系统允许开发者通过简单的类选择器创建灵活的、自适应的布局。每...
Bootstrap 布局组件（全）
12-12
Bootstrap 布局组件 1、Bootstrap字体图标 （1）、字体图标列表链接  http://www.mscto.com/bootstrap/bootstrap-glyphicons.html （2）、用法  如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本...
bootstrap响应式布局
03-19
1. CSS 相邻兄弟选择器 + 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。 2. 手机字体图标：`content: '\e958';` 电话字体图标：`content: '\e942';` 3. bootstrap最外层伸缩容器：`class="container"` 4. bootstrap伸缩布局并居中：`d-flex justify-content-center align-items-center` 5. `jQuery.data(element,[key],[value])`：在元素上存放数据,返回jQuery对象。 例如：在index界面中 ```javascript <div class="carousel-item active" data-sm-img="images/slide_01_900x410.jpg" data-lg-img="images/slide_01_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_02_900x410.jpg" data-lg-img="images/slide_02_2000x410.jpg"></div> <div class="carousel-item" data-sm-img="images/slide_03_900x410.jpg" data-lg-img="images/slide_03_2000x410.jpg"></div> ``` 在 js中，可以通过 ```javascript $('.carousel-item').data('lg-img') ``` 获取路径值。 6. bootstrap中圆角`rounded-circle` 7. 可以使用`order-*`调整显示顺序 8. 伸缩布局两步走`container+row` ```javascript <div class="container"> <div class="row"> *** </div> </div> ``` 9. 可以利用`offset`设置偏移量调整位置 10. 将jQuery对象转换为js对象可以直接通过下标取 11. 轮播图可以通过`.carousel('prev')`和`.carousel('next')`触发前后滑动事件 12. jQuery中缩小元素查找范围 ```javascript let $ul = $("#lk_product .nav"); let $allLis = $(".nav-item", $ul); ```
bootstrap第二章：bootstrap布局
qq_62244121的博客
10-17 4323
bootstrap布局详细介绍，附有网格列偏移和网格列嵌套
第一章 Bootstrap的布局
最新发布
mlfc0422的博客
11-14 1520
在Bootstrap中，容器（Container）是用于包装网页内容的布局元素，它有助于创建响应式网页布局。容器提供了不同的宽度选项，以适应不同的屏幕尺寸和设备。.container.container是Bootstrap中最常用的容器类，用于创建固定宽度的容器。这意味着容器的宽度会根据屏幕尺寸而变化，但它会有一个最大宽度，以确保内容不会过于扩展。该容器类适合于大多数网页布局，尤其是在中等和大屏幕设备上。类用于创建全宽度的容器，容器的宽度会充满整个浏览器窗口的可视区域。
bootstrap的布局规范（container、row、col）
南山的专栏
06-30 2027
Bootstrap内置了一套响应式、移动设备优先的12列格网布局系统，它会随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。Bootstrap有自己的固定的规范，使用时要按规范来，否则可能出现布局错乱，或者一起奇怪的问题（例如：导航条只有在页面拖动时才显示）。通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。你的内容应当放置于列（column）内，而且，只有列（column）可以作为行（row）的直接子元素。
Bootstrap学习2：bootstrap中的布局
D_evin_的博客
09-18 1931
Bootstrap中的布局 四、栅格布局 - 栅格系统是用于页面布局，属于Bootstrap的核心 - 可以在不同终端显示不同效果（响应式） - 栅格，具有行row、列col的概念，网格列是通过跨越指定的 12 个列来创建。 1.栅格布局的列 - 一行平均分为12个列 - `.col-1~12`代表列占有行的十二分之几份 2.栅格布局的响应式 - `.col-sm-*` 小屏幕 - `.col-md-*` 中屏幕 - `.col-lg-*` 大屏幕 - .
Bootstrap 布局组件
qq_35377740的博客
07-16 381
字体图标（Glyphicons）bootstrap提供了250个字体图标，只需要给元素添加字体图标类，就能显示字体图标对应的图片，不需要再添加图片了。图片不予其他组件联合使用，应该创建一个嵌套的&lt;span&gt;标签，给&lt;span&gt;标签添加图标类。下拉菜单基本结构&lt;div class="dropdown"&gt;  &lt;button  data-toggle="drop...
bootstrap入门之布局系统
蛐蛐的博客
04-27 496
1.简介 布置Bootstrap项目的组件和选项，包括包装容器，强大的网格系统，灵活的媒体对象和响应实用程序类。 2.Containers 容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。 容器用于在其中容纳，填充和（有时）使内容居中。尽管可以嵌套容器，但是大多数布局都不需要嵌套容器。 Bootstrap带有三个不同的容器： .container，它在每个响应断点处设置一个max-width .container-fluid，所有断...
bootstrap布局基础
weixin_55743273的博客
11-10 2724
文章目录一、bootstrap布局1.什么是bootstrap布局2.布局容器3.使用方法二、栅格系统1.栅格系统2.栅格选项参数2.1 份数相加结果出现的情况2.1.12.1.22.1.33.响应式工具总结 一、bootstrap布局 1.什么是bootstrap布局 Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，提供了优雅的HTML和CSS规范，由动态CSS语言Less写成。 2.布局容器 boots
BootStrap布局结构 Flex各种布局
舜岳的博客
03-27 2009
1、左右结构 <div class="d-flex flex-row" style="width: 500px; height: 400px;border:2px solid #ae00e6"> <div region="west" class="west" style="width: 140px;"> 西 </div> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值