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

最新推荐文章于 2022-04-29 18:55:16 发布
最新推荐文章于 2022-04-29 18:55:16 发布
阅读量906 收藏
点赞数
版权声明：本文为博主原创文章，遵循 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 1169
一：概念 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动...
Bootstrap入门.css样式【栅格系统】
m0_62864440的博客
04-29 330
目录 1.WWW 2.环境安装 3.Bootstrap CSS 3.1.概览 3.2.栅格系统 1.WWW是什么 WWW指的是What、Why、Where What:Bootstrap是一个前端开发框架。简单点说就是别人写好的效果封装起来。 Bootstrap是2011年Twitter团队为了方便维护PC端和手机端二研发的一个响应式前端...
bootstrap3容器（流体容器、固定容器、栅格系统）的具体详解
胡图图不糊涂的博客
04-06 1519
一、流体容器 <div class="container-fluid"> Hello,there. </div> 二、固体容器 <div class="container"> Hello,there. </div> 有阈值： 三、栅格系统 ...
bootstrap-----流体布局解析
u012138854的博客
11-07 245
流体布局容器 容器的width为auto，只是两边加了15px的padding。 流体布局容器 容器的width为auto，只是两边加了15px的padding。 <div class="container-fluid"> <!DOCTYPE html> <html> <head> &lt...
Bootstrap 流式布局
歪脖先生的博客
03-04 5160
流式布局同理，将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 354
流体容器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 217
1. 流容器 可以将输入输出流看做是一种容器，         list iList;         copy(iList.begin(),iList.end(),ostream_iterator(cout," ")); ostream_iterator的第二个
响应式布局入门教程
10-16
学习响应式布局，你需要熟悉CSS盒模型、流体布局的概念，以及如何编写媒体查询。通过实践，逐步掌握在不同屏幕尺寸下优化布局和交互的方法。同时，理解移动优先的思维方式，将有助于你创建更加适应未来多设备环境的...
Bootstrap入门书籍之（三）栅格系统
09-02
总的来说，Bootstrap的栅格系统是构建响应式网页布局的强大工具，它简化了布局设计的复杂性，让开发者能够快速创建适应各种设备的网页。通过理解和掌握这个系统的工作原理，你可以更加自如地调整和控制网页在不同...
Bootstrap【第一章】入门、全局CSS样式【栅格系统】
明思齐的博客
04-29 2060
前言：Bootstrap【前端开发框架】 一、WWW 1、What？ ①2011年，来自Twitter，是目前最受欢迎的前端框架 ②是一个用于快速开发Web应用程序和网站的前端框架 ③Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 简单概述：Bootstrap是一个建立一个页面，可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架。 2、Why？ ①响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电...
容器流体与容器
asdfgh0077的博客
05-01 302
Just downloaded 3.1 and found in the docs... 刚下载3.1并在文档中找到... Turn any fixed-width grid layout
bootstrap前端框架的容器简介
perfect88888的博客
04-01 589
bootstrap是js前端开发框架，是基于HTML、css、javascript的，swiper是js的库 bootstrap有响应式布局的解决方案是他的亮点！！！ 框架是一套规范就是研发的时候必须按照原有的写。 bootstrap栅格系统是bootstrap的核心一部分 bootstrap栅格系统： bootstrap将页面横向分为12等分，按照12等分定义了适合不同宽度等分的样式类，这些样式...
响应式布局之Bootstrap
qq_51481160的博客
11-02 470
响应式布局之Bootstrap 1.响应式开发原理 使用媒体查询针对不同宽度的设备进行布局和样式设置，从而达到适配不同的设备的目的。 2.响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面自级元素的排列方式和大小，从而实现不同屏幕下不同的页面布局和样式变化。 bootstrap 基于HTML、CSS、JAVASCRIPT的一种前端框架 bootstrap使用四部曲：1.创建文件夹结构 2.创建html骨架结构
响应式布局
JJ_Smilewang的博客
04-20 1413
1. 响应式布局原理 所谓响应式布局，就是随着屏幕宽度的不同，呈现出不同的布局样式，它是通过使用媒体查询，针对不同宽度的设备进行布局和样式实现的。 2. 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。 平时我们的响应式尺寸划分 ①小屏幕（手机，小于 768px）：设置容器宽度为 100% ②小屏幕（平板，大于等于 .
Vue状态管理
ProChick's Blog
11-05 1366
状态管理1.什么是状态管理？2.下载使用3.管理模式4.配置选项5.状态管理中的API 1.什么是状态管理？ 由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长，所以 Vuex是Vue团队提供的一套组件状态管理维护的解决方案 作用 进一步完善了Vue基础代码功能 使Vue组件状态更加容易维护 为大型项目开发提供了强大的技术支持 使用 <script src="vue.js"></script> <script src="vuex.js"
前端|响应式开发之布局容器
算法与编程之美
03-26 772
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述在前面学习了响...
流式布局、响应式布局、弹性布局等概念和区别
weixin_39580806的博客
10-16 5378
静态布局（Static Layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。 2、设计方法： 　　PC：居中布局，所...
响应式容器布局
weixin_30488313的博客
08-22 80
HTML: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1" > 视口 ...
Java-Bootstrap-第35节
zuefeng的博客
12-08 143
学习目标： 理解框架的概念 掌握Bootstrap的内容分布与使用步骤 深刻理解什么是响应式布局 熟练使用CSS样式和JS插件 学习内容： 一、Bootstrap 1、概念：一个前端开发的框架 框架： 一个半成品软件，开发人员可以借助框架简化编码 好处： 定义了很多CSS样式和js插件，开发人员可以直接使用这些样式和插件丰富页面效果 响应式布局：同一套页面可以兼容不同分辨率的设备 2、快速入门 下载Bootstrap 将下载好的文件复制到项目中 创建一个HTML页面，引入必要的资源文件
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

鲸鱼编程pyhui

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

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

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

打赏作者

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

抵扣说明：

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

余额充值