bootstrap-入门学习-流体容器与响应式布局容器

最新推荐文章于 2023-03-11 09:28:02 发布
最新推荐文章于 2023-03-11 09:28:02 发布
阅读量912 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ifubing/article/details/95041738
版权

前情回顾

本地存储 cookie

在这里插入图片描述

localStorage 与 sessionStorage

在这里插入图片描述

移动端的事件和库

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

bootstrap框架

应聘要求，会用这个

前端应用多

框架大于库，内容更多

一些写好的特效直接用，加快开发进度

可以做响应式布局， 做一个页面，支持多个终端（不同终端显示不同内容）

在这里插入图片描述

官网

在这里插入图片描述

下载

在这里插入图片描述

起步 · Bootstrap v3 中文文档
https://v3.bootcss.com/getting-started/#download

下载后

新建一个文件

注，bootstrap是依赖jquery的

文档中的加载位置

在这里插入图片描述

实际开发的加载位置

在这里插入图片描述

双方的好处与坏处

文档的加载，放在底部，因为，加载js是阻塞式加载的，会影响性能

实际开发时会把这些都放在头部，因为头部未来会被共享出去被其它页面共同使用

所以不太好放在底部

容器

在这里插入图片描述

流动容器，窗度百分百

响式容器，按照查询区间变化

在这里插入图片描述

在这里插入图片描述
流体布局

左右15填充

在这里插入图片描述

响应式容器h

在这里插入图片描述
在这里插入图片描述

练一练，实现流式布局与响应式布局

鲸鱼编程pyhui
关注
Bootstrap 快速入门之第一章 入门&全局CSS之概览&栅格系统
qq_61313896的博客
04-29 1188
一：概念 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动...
bootstrap3容器（流体容器、固定容器、栅格系统）的具体详解
胡图图不糊涂的博客
04-06 1540
一、流体容器 <div class="container-fluid"> Hello,there. </div> 二、固体容器 <div class="container"> Hello,there. </div> 有阈值： 三、栅格系统 ...
bootstrap-----流体布局解析
u012138854的博客
11-07 255
流体布局容器 容器的width为auto，只是两边加了15px的padding。 流体布局容器 容器的width为auto，只是两边加了15px的padding。 <div class="container-fluid"> <!DOCTYPE html> <html> <head> &lt...
Bootstrap 流式布局
歪脖先生的博客
03-04 5178
流式布局同理，将Bootstrap的流式栅格放到 class="container-fluid" 的流式容器中，即可创建流式布局。流式布局将填满整个视口宽度。如：&lt;div class="container-fluid"&gt;  &lt;div class="row-fluid"&gt;    &lt;div class="span2"&gt;      &lt;!--
bootstrap的流体容器与固定容器
起名好难呀！
12-12 366
流体容器container-fluid <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流体容器</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"&
流容器与插入迭代器
08-25 222
1. 流容器 可以将输入输出流看做是一种容器，         list iList;         copy(iList.begin(),iList.end(),ostream_iterator(cout," ")); ostream_iterator的第二个
BootStrap入门：响应式布局与基础CSS解析
1. **响应式设计**：Bootstrap的响应式布局确保网站在不同设备上都能呈现良好的用户体验，无论是在桌面、平板还是手机上。 2. **12列格网系统**：格网系统允许开发者轻松地创建灵活的布局，通过12列的网格划分页面...
响应式布局入门教程
10-16
学习响应式布局，你需要熟悉CSS盒模型、流体布局的概念，以及如何编写媒体查询。通过实践，逐步掌握在不同屏幕尺寸下优化布局和交互的方法。同时，理解移动优先的思维方式，将有助于你创建更加适应未来多设备环境的...
BootStrap入门：打造响应式前端框架
"BootStrap入门教程.pdf 是一份关于BootStrap框架的详细学习资料，由VentLam创作并遵循知识共享署名-非商业性使用-相同方式共享2.5中国大陆许可协议。该教程介绍了BootStrap的历史、特点以及核心概念，包括...
Bootstrap入门书籍之（三）栅格系统
09-02
总的来说，Bootstrap的栅格系统是构建响应式网页布局的强大工具，它简化了布局设计的复杂性，让开发者能够快速创建适应各种设备的网页。通过理解和掌握这个系统的工作原理，你可以更加自如地调整和控制网页在不同...
容器流体与容器
asdfgh0077的博客
05-01 310
Just downloaded 3.1 and found in the docs... 刚下载3.1并在文档中找到... Turn any fixed-width grid layout
bootstrap前端框架的容器简介
perfect88888的博客
04-01 598
bootstrap是js前端开发框架，是基于HTML、css、javascript的，swiper是js的库 bootstrap有响应式布局的解决方案是他的亮点！！！ 框架是一套规范就是研发的时候必须按照原有的写。 bootstrap栅格系统是bootstrap的核心一部分 bootstrap栅格系统： bootstrap将页面横向分为12等分，按照12等分定义了适合不同宽度等分的样式类，这些样式...
响应式开发(基于bootstrap)
weixin_43401042的博客
04-24 3885
@TOC bootstrap响应式学习视频链接 一.响应式开发 1.1响应式开发原理 定义：就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备的目的。 设备划分 尺寸区间 超小屏幕 <768px 小屏设备（手机） >=768px~<992px 中等屏幕（平板） >=992px~<1200px 宽屏设备 >=1200...
响应式布局之Bootstrap
qq_51481160的博客
11-02 486
响应式布局之Bootstrap 1.响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同的设备的目的。 2.响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面自级元素的排列方式和大小，从而实现不同屏幕下不同的页面布局和样式变化。 bootstrap 基于HTML、CSS、JAVASCRIPT的一种前端框架 bootstrap使用四部曲：1.创建文件夹结构 2.创建html骨架结构
【Echarts可视化】响应式容器的设置，解决选项卡tab切换时图表消失的问题
最新发布
在红尘中争渡
03-11 1348
Echarts+Bootstrap 响应式容器的设置、解决选项卡切换图表不显示问题
Vue状态管理
ProChick's Blog
11-05 1378
状态管理1.什么是状态管理？2.下载使用3.管理模式4.配置选项5.状态管理中的API 1.什么是状态管理？ 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长，所以 Vuex是Vue团队提供的一套组件状态管理维护的解决方案 作用 进一步完善了Vue基础代码功能 使Vue组件状态更加容易维护 为大型项目开发提供了强大的技术支持 使用 <script src="vue.js"></script> <script src="vuex.js"
移动端WEB开发 响应式布局
Ulrica_Amaris的博客
03-20 401
响应式开发 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。 <style> .container { height: 150px; background-color: pink; margin: 0 auto; } /* 1. 超小屏幕下 小于 768 布局容器的宽度为 100% */ @
流式布局、响应式布局、弹性布局等概念和区别
weixin_39580806的博客
10-16 5639
静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法： 　　PC：居中布局，所...
[前端]-Bootstrap响应式 框架
listeningdu的博客
11-25 812
前端Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。
Bootstrap响应式入门教程：理解布局与媒体查询
本篇文章是关于Bootstrap入门教程的第三部分，专注于响应式设计的核心原理。Bootstrap是一个流行的前端开发框架，其设计目标是使网站在各种设备上都能提供一致的用户体验，特别是适应不同屏幕尺寸的移动设备。 响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鲸鱼编程pyhui

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值