Bootstrap入门到精通

news/2024/4/27 0:38:15/文章来源:https://blog.csdn.net/qq_47272950/article/details/129169299

文章目录

  • 前言
  • 一、Bootstrap是什么？
  • 二、Bootstrap安装
    • 方式一：将压缩包下载到本地引入使用
    • 方式二：使用Bootstrap官方cdn
  • 二.Bootstrap容器
    • 下面是屏幕宽度在不同大小时不同容器的显示状态
  • 三.Bootstrap栅格系统
    • bootstrap网格系统有以下六个类
    • 网格系统规则
    • 示例（第一行等分为12份）：
    • 示例（第二行等分为3份）：
    • 示例（第三行 不等分左边占用三分之一右边占用三分之二）：
    • 示例（网格嵌套列）
    • 示例（网格偏移列）
    • 示例（网格列顺序 ）
    • 网格排列规则
  • 总结

前言

随着Bootstrap的问世，Web开发者不必再花费时间、费力地编码，只需找到合适的代码，插入到合适位置即可。此外，CSS利用LESS编写，很多样式和设计都已设计完成。

一、Bootstrap是什么？

Bootstrap是一个用于快速开发Web应用以及网站的前端框架Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活，它基于html，css，js，html用于定义页面元素，css定义页面布局，而js用于控制页面元素的响应，Bootsrap将html，css，和js封装成一个个功能组件，用起来简洁灵活，使得Web开发更便捷

二、Bootstrap安装

方式一：将压缩包下载到本地引入使用

搜索进入Bootstrap中文网并点击等待下载安装

在这里插入图片描述

下载并解压之后把文件名更改为Bootstrap5并将它拖入你的网站根目录，下面分别是css以及js文件的文件内容

在这里插入图片描述

在这里插入图片描述

将css与js分别引入，css使用link引入，js在body标签结尾之前使用script引入

在这里插入图片描述

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="/bootstrap-5/css/bootstrap.min.css"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="app"></div><!-- built files will be auto injected --><script src="/bootstrap-5/js/bootstrap.min.js"></script></body>
</html>

方式二：使用Bootstrap官方cdn

直接复制粘贴到对应位置就可以啦（注意要将integrity属性和crossorigin属性删掉不然会提示错误信息）

在这里插入图片描述

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" /><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="app"></div><!-- built files will be auto injected --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" ></script></body>
</html>

二.Bootstrap容器

从超小到小屏幕然后中等–>大屏幕–>特大屏幕–>超级大屏幕这几个阶段显示的宽度状态也截然不同

在这里插入图片描述

.container用于创建固定宽度的响应式页面
.container-luid类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（100%）

区别：

相同点就是俩者都可以将高度设置为auto

不同点就是containe根据屏幕利用媒体查询，设置了固定的宽度，它是阶段性的改变宽度，而container-fluid则是将宽度设定为auto，所以当浏览器缩放时，它始终保持100%大小

下面是屏幕宽度在不同大小时不同容器的显示状态

宽度大于1400显示如下（1920）

在这里插入图片描述

宽度大于1200<1400显示如下（1360）

在这里插入图片描述
宽度大于992<1200显示如下（1080）

在这里插入图片描述

宽度大于768<992显示如下（820）

在这里插入图片描述

宽度大于576<768显示如下（640）

在这里插入图片描述

宽度小于576显示如下（375）

在这里插入图片描述

三.Bootstrap栅格系统

bootatrap提供了一套响应式，移动设备优先的流式网格系统，随着屏幕或者视口尺寸的增加，系统会自动分为最多12列，多出12列的将不再此行显示（换行显示）

bootstrap网格系统有以下六个类

  • .col 针对所有设备
  • .col-sm 平板-屏幕宽度等于或大于576px
  • .col-md 桌面显示器-屏幕宽度等于或者大于768px
  • .col-lg 大桌面显示器-屏幕宽度等于或大于992px
  • .col-xl 特大桌面显示器-屏幕宽度等于或大于1200px
  • .col-xxl 超级大桌面显示器-屏幕宽度等于或大于1400px

网格系统规则

  • 使用行来创建水平的列组
  • 网格每一行需要方式在设置了.container或者其他类的容器中，这样就可以自动设置一些外边距与内边距
  • 内容需要放置在列中，并且只有列可以是行的直接子节点
  • 预定义的类如.row和.col-sm-4可以用于快速制作网格布局

示例（第一行等分为12份）：

container和row共同组成栅格容器，row代表的是一行

创建栅格容器后，设置名为.col-sm的div，当尾数为1时，则表示每个div宽度占1/12

	<div class="container">            <div class="row"><h1>第一行</h1><!-- 最多可以分成12个网格，下面是每一个网格占用1个比例 --><div class="col-sm-1">1</div><div class="col-sm-1">2</div><div class="col-sm-1">3</div><div class="col-sm-1">4</div><div class="col-sm-1">5</div><div class="col-sm-1">6</div><div class="col-sm-1">7</div><div class="col-sm-1">8</div><div class="col-sm-1">9</div><div class="col-sm-1">10</div><div class="col-sm-1">11</div><div class="col-sm-1">12</div></div></div>

屏幕宽度大于576px显示如下：
在这里插入图片描述

宽度小于576px则是这样显示

在这里插入图片描述

示例（第二行等分为3份）：

  <div class="container">   <div class="row"><h1>第一行</h1><!-- 最多可以分成12个网格，下面是每一个网格占用1个比例 --><div class="col-sm-1">1</div><div class="col-sm-1">2</div><div class="col-sm-1">3</div><div class="col-sm-1">4</div><div class="col-sm-1">5</div><div class="col-sm-1">6</div><div class="col-sm-1">7</div><div class="col-sm-1">8</div><div class="col-sm-1">9</div><div class="col-sm-1">10</div><div class="col-sm-1">11</div><div class="col-sm-1">12</div></div><div class="row"><h1>第二行</h1><!-- 最多可以分成12个网格，下面是每一个网格占用1个比例 --><div class="col-sm-4">1</div><div class="col-sm-4">2</div><div class="col-sm-4">3</div></div></div>

在这里插入图片描述

示例（第三行 不等分左边占用三分之一右边占用三分之二）：

    <div class="container">     <div class="row"><h1>第一行</h1><!-- 最多可以分成12个网格，下面是每一个网格占用1个比例 --><div class="col-sm-1">1</div><div class="col-sm-1">2</div><div class="col-sm-1">3</div><div class="col-sm-1">4</div><div class="col-sm-1">5</div><div class="col-sm-1">6</div><div class="col-sm-1">7</div><div class="col-sm-1">8</div><div class="col-sm-1">9</div><div class="col-sm-1">10</div><div class="col-sm-1">11</div><div class="col-sm-1">12</div></div><div class="row"><h1>第二行</h1><!-- 最多可以分成12个网格，下面是每一个网格占用1个比例 --><div class="col-sm-4">1</div><div class="col-sm-4">2</div><div class="col-sm-4">3</div>           </div><div class="row"><h1>第三行</h1><!-- 最多可以分成12个网格，下面是每一个网格占用1个比例 --><div class="col-sm-4">1</div><div class="col-sm-8">2</div>           </div></div>

在这里插入图片描述

示例（网格嵌套列）

下面代码将布局分为了俩列（左侧一列占7份，右侧占5份），其中每列内部还设置有俩行，总和并超过了外面设置的7份或者5份，这么设置会不会正常显示呢？我们接着往下看

 <div class="row"><h1>第四行</h1><div class="col-sm-7" style="background: red;"><div class="row"><div class="col-sm-6">col-sm-6</div><div class="col-sm-6">col-sm-6</div></div><div class="row"><div class="col-sm-4">col-sm-1</div><div class="col-sm-6">col-sm-9</div></div></div><div class="col-sm-5" style="background: blue;"><div class="row" ><div class="col-sm-6">col-sm-6</div><div class="col-sm-6">col-sm-6</div></div><div class="row"><div class="col-sm-4">col-sm-1</div><div class="col-sm-6">col-sm-9</div></div></div></div></div>

可以正常显示，说明每一列中的每一行占用的空间是将父级列所占用的空间又等分成了12份，并不是说父级列设置了7或者5，里面行的总和就得小于这个数

在这里插入图片描述

示例（网格偏移列）

网格列偏移是通过类名offset- * - * 来设置的
第一个*号是表示屏幕设备类型例如sm，md，lg等等
第二个*号是表示偏移度可以设置1-11的数字

例子：offset-md-4是往右边移动了4格

<div class="row"><h1>第五行</h1><div class="col-sm-4" style="background: red;">1</div><div class="col-sm-4 offset-sm-4" style="background: blue;" >2</div>
</div>

俩列共占用8格，还剩余四格，所以想要蓝色格子到最右边，则给右边格子设置4偏移量offset-sm-4

在这里插入图片描述

示例（网格列顺序 ）

网格列顺序是通过类order来控制内容的可视顺序，order-sm-1

  <div class="row"><h1>没有加order</h1><div class="col-sm-4" style="background: red;">1</div><div class="col-sm-4" style="background: blue;" >2</div><div class="col-sm-4" style="background: green;" >3</div></div><div class="row"><h1>加了order</h1><div class="col-sm-4 order-sm-2" style="background: red;">1</div><div class="col-sm-4 order-sm-3" style="background: blue;" >2</div><div class="col-sm-4 order-sm-1" style="background: green;" >3</div></div>

在这里插入图片描述

网格排列规则

排列数字1-5会起作用，5之后的数字不起作用

用数字设置顺序，导致的问题比如有八个div如果只是给前三个设置order后面没有设置顺序，则后面的div就会排到前面去然后紧接着是加了顺序的123div

order-first和order-last顺序设置时候不会出现上面那种问题，设置第一个就是第一个，设置最后就是最后，且优先级比设置数字要高

总结

以上就是今天要讲的内容，本文目前简单介绍了Bootstrap的使用，后续还会继续更行

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_73010.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

linux shell 入门学习笔记7 父子shell面试题

linux shell 入门学习笔记7 父子shell面试题

1. 不同的执行方式&#xff0c;不同的shell环境 每次调用bash/sh解释器执行脚本都会开启一个子shell&#xff0c;因此不保留当前shell变量&#xff0c;通过pstree命令检查进程树调用source是当前环境加载脚本&#xff0c;因此保留变量 例子&#xff1a; xiao123xiao123:~/Dow…
阅读更多...
直播间的2个小感悟

直播间的2个小感悟

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 在线人数固定 最近直播间出现了很多新面孔&#xff0c;有的是偶然刷到的&#xff0c;有的是关注互联网找到的。而直播间的人数一直没什么变化&#xff0c;卢松松在抖音直播较少&#xff0c;主播间…
阅读更多...
开学第一周，超30所高校系主任选择与百度飞桨联办校赛

开学第一周，超30所高校系主任选择与百度飞桨联办校赛

经历了一场特殊而漫长的假期&#xff0c;各地校园又恢复了往日的热闹&#xff0c;重新焕发出勃勃生机&#xff0c;师生们在一声声久别重逢的暖心问候中&#xff0c;迎来了2023年春季学期。 以赛促学蔚然成风 开学季是校内竞赛策划及启动的最佳时机之一&#xff0c;越来越多的老…
阅读更多...
JVM17GUI工具

JVM17GUI工具

3. JVM 监控及诊断工具-GUI 篇 3.1. 工具概述 命令行工具或组合能帮您获取目标 Java 应用性能相关的基础信息&#xff0c;但它们存在下列局限&#xff1a; 1&#xff0e;无法获取方法级别的分析数据&#xff0c;如方法间的调用关系、各方法的调用次数和调用时间等&#xff0…
阅读更多...
TEMU联盟计划用意何在？做推广达人真的能收入满满吗？

TEMU联盟计划用意何在？做推广达人真的能收入满满吗？

据东哥近期了解&#xff0c;Temu在北美市场表现十分火爆&#xff0c;甚至冲上了AppStore下载榜第一名。Temu在美国市场上采用了类似PDD的病毒式传播策略&#xff0c;以实惠的产品和折扣吸引消费者并动员普通人大量传播链接和App下载&#xff0c;所以有了TEMU联盟计划&#xff0…
阅读更多...
ArcGIS导出AI或EPS格式的地图图片并在Adobe Illustrator中继续编辑

ArcGIS导出AI或EPS格式的地图图片并在Adobe Illustrator中继续编辑

本文介绍在ArcGIS下属的ArcMap软件中&#xff0c;将绘制好的地图导出为.ai或者.eps格式文件&#xff0c;并在Adobe Illustrator软件中进一步编辑地图&#xff0c;并最终导出为图片格式的结果文件的方法。 在ArcMap软件中绘制各类地图可以说非常方便&#xff0c;绘制得到的地图也…
阅读更多...
深圳/东莞/惠州师资比较强的CPDA数据分析认证

深圳/东莞/惠州师资比较强的CPDA数据分析认证

深圳/东莞/惠州师资比较强的CPDA数据分析认证培训机构 CPDA数据分析师认证是中国大数据领域有一定权威度的中高端人才认证&#xff0c;它不仅是中国较早大数据专业技术人才认证、更是中国大数据时代先行者&#xff0c;具有广泛的社会认知度和权威性。 无论是地方政府引进人才、…
阅读更多...
synchronized和ReentrantLock有什么区别呢？

synchronized和ReentrantLock有什么区别呢？

第15讲 | synchronized和ReentrantLock有什么区别呢&#xff1f; 从今天开始&#xff0c;我们将进入 Java 并发学习阶段。软件并发已经成为现代软件开发的基础能力&#xff0c;而 Java 精心设计的高效并发机制&#xff0c;正是构建大规模应用的基础之一&#xff0c;所以考察并发…
阅读更多...
Golang学习Day1

Golang学习Day1

&#x1f60b; 大家好&#xff0c;我是YAy_17&#xff0c;是一枚爱好网安的小白。本人水平有限&#xff0c;欢迎各位大佬指点&#xff0c;欢迎关注 &#x1f601;&#xff0c;一起学习 &#x1f497; &#xff0c;一起进步 ⭐ 。⭐ 此后如竟没有炬火&#xff0c;我便是唯一的光…
阅读更多...
诚邀您体验人工智能AI

诚邀您体验人工智能AI

近期&#xff0c;人工智能&#xff08;AI&#xff09;领域动作频频&#xff0c;OPENAI公司Chat GPT的出现&#xff0c;标志着人工智能的研究与应用已经进入了一个崭新的发展阶段&#xff0c;国内腾讯、阿里巴巴、百度、易网、国外微软、谷歌、苹果、IBM、Amazon&#xff0c;等互…
阅读更多...
电子技术——反馈放大器的分析方法总结

电子技术——反馈放大器的分析方法总结

电子技术——反馈放大器的分析方法总结 第一种也是最简单的估算方法&#xff0c;直接拿出反馈网络&#xff0c;计算 β\betaβ 则假设在 AβA\betaAβ 无限大的情况下有 Af≃1/βA_f \simeq 1/\betaAf​≃1/β 。开环法。比第一种方法更能精确的估计 AAA 和 β\betaβ 的值。系…
阅读更多...
自动化测试优势和劣势

自动化测试优势和劣势

一、自动化测试概述 软件自动化测试是相对手工测试而存在的&#xff0c;由测试人员根据测试用例中描述的规程一步步执行测试&#xff0c;得到实际结果与期望结果的比较。在此过程中&#xff0c;节省人力、时间或硬件资源&#xff0c;提高测试效率。 二、自动化测试优势&劣…
阅读更多...
BP神经网络参数总结，BP神经训练窗口详解，基于BP神经网络的火灾识别，1000案例之17

BP神经网络参数总结，BP神经训练窗口详解，基于BP神经网络的火灾识别，1000案例之17

目录 摘要 BP神经网络参数设置及各种函数选择 参数设置 训练函数 传递函数 学习函数 性能函数 显示函数 前向网络创建函数 BP神经网络训练窗口详解 训练窗口例样 训练窗口四部详解 基于B P神经网络的火灾识别 数据集 MATLAB编程BP神经网络代码&#xff0c;并附有GUI窗口 效果图…
阅读更多...
Python-项目实战--贪吃蛇小游戏-贪吃蛇功能实现（4）

Python-项目实战--贪吃蛇小游戏-贪吃蛇功能实现（4）

5.贪吃蛇功能的实现在这一小节&#xff0c;我们就以完成的游戏框架为基础&#xff0c;加入贪吃蛇的功能&#xff0c;完成整个游戏的开发本小节的知识重点包括:贪吃蛇类的设计定义贪吃蛇类添加蛇身体绘制和移动身体改变贪吃蛇的方向贪吃蛇吃食物贪吃蛇的死亡5.1贪吃蛇类的设计我…
阅读更多...
java -cp 错误：找不到或无法加载主类

java -cp 错误：找不到或无法加载主类

java -cp 错误&#xff1a;找不到或无法加载主类 1.问题场景 在一个项目开发中&#xff0c;我需要写一个 windows的bat脚本&#xff0c;需要在里面 调用 SpringBoot项目生成的jar包&#xff0c;我在调用 classes下面的 jar时 通过 调用 jar包 去调用 jar包中的某个 .java类 …
阅读更多...
吃鸡用什么蓝牙耳机效果好？手游吃鸡公认最好的几款蓝牙耳机

吃鸡用什么蓝牙耳机效果好？手游吃鸡公认最好的几款蓝牙耳机

蓝牙耳机的作用很多&#xff0c;几乎每个人都需要一副很棒的耳机在通勤或锻炼途中使用&#xff0c;并且玩游戏也少不了它&#xff0c;手游近几年十分的流行&#xff0c;下面整理了几款性能不错的蓝牙耳机。 第一款&#xff1a;南卡小音舱蓝牙耳机 蓝牙版本&#xff1a;5.3 发…
阅读更多...
树莓派CM4基础设置

树莓派CM4基础设置

安装系统1.1 软件和硬件准备硬件&#xff1a;CM4&#xff08;4GB DDR32GB EMMC 板载WIFI和蓝牙&#xff09;CM4-to-Pi4-Adapter软件&#xff1a;Raspberry Pi或者 Win32DiskImagerRaspberry Pi下载链接&#xff1a;点击直接下载Win32DiskImager下载链接&#xff1a;链接&#x…
阅读更多...
JSP 在线学习管理系统myeclipse定制开发sqlserver数据库网页模式java编程jdbc

JSP 在线学习管理系统myeclipse定制开发sqlserver数据库网页模式java编程jdbc

一、源码特点 JSP 在线学习管理系统是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为SQLServer2008&#x…
阅读更多...
第09章_MySQL子查询

第09章_MySQL子查询

第09章_子查询 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.com 子查询指一个查询语句嵌套在另一个查询语句内部的查询&#xff0c;这个特性从MySQL 4.1开始引入。 SQL 中子查询的使用大大增强了…
阅读更多...
2023年你应该关注的JavaScript趋势

2023年你应该关注的JavaScript趋势

本文翻译者系360 奇舞团前端开发工程师原文标题&#xff1a;Top JavaScript (JS) Trends You Should Follow in 2023原文作者&#xff1a;yevheniia原文地址&#xff1a;https://www.codica.com/blog/top-javascript-trends/#top-java-script-frameworks-and-libraries-to-watc…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业