10_XX
_XXX
英文开头
https://getbootstrap.com/docs/4.6/getting-started/download/
https://getbootstrap.com/docs/4.6/getting-started/contents/
会长成这样
1.找下载後的档案包长怎样 Contents
2.如何引用? Quick start (同.css)
3.版本的选用? Internet Explorer
版本3:支援IE
版本4:IE8-9 support
版本5:不支援IE
bootstrap.min.css
所以很大的机率
bootstrap.css
可以找到原未压缩档
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css
(1)小专?
CDN优点:硬碟空间减少,缺点:坏掉怎麽办?
FILE:相反
(2)工作? 会有经手多人的问题,很多版本
CDN:万一坏掉就全歪掉
FILE:看原本公司怎麽走,跟着走 要死大家一起死XD
点选 bootstrap 官网 Documentation 连结
方法1.左侧选单 Components > 找到 Dropdowns
方法2.在左侧选单上方输入 Dropdown 进行搜寻
确认网页是否可以正常执行?为什麽不能使用?(档案22_Local)
办法1.官方对比 整理!!
观察Starter template使用顺序?怎麽使用?
https://getbootstrap.com/docs/4.6/getting-started/introduction/
办法2.
F12 看红色叉烧包xx直接改 或 xx搜寻
2.差异在顺序!!
虽然官方在<body> 为了上课方便放<head>
<script src="../_js/jquery.min.js"></script>
<script src="../_js/popper.min.js"></script>
<script src="../_js/bootstrap.min.js"></script>
1.大方向的时候(如标签)请直接搜寻大标
2.假设我要查询data-toggle 关键字可以是
html button data-toggle boostrap
3.F12 并查询xx
4.版本问题要看官方文件
版本跟自写的CSS冲突时?查询.css
(档案30_v3_and_v4)
https://www.tutorialspoint.com/bootstrap4/bootstrap4_differences_between_bootstrap_3_and_4.htm
版本3
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
版本4.
https://www.geeksforgeeks.org/difference-between-bootstrap-4-and-bootstrap-5/
.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
3无 background-color:
4有 background-color: transparent;
所以v3有效
button {
background-color: lightcoral;
}
v4需要增加权重才会显示
.btn {
background-color: lightcoral;
}
1.搜寻CSS,方式".col(空格)"
2.直接看看里面跟自己写的差异去比较
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
div.row
div.col15
div.col15{$} => 1~15
table>tr>td*3
div#Id
(1)分几个? 预设
<div class="row">
<div class="col">1</div> = flex-grow:1;
</div>
(2)最多占12格
<div class="row">
<div class="col-12">1</div>
</div>
(3)哪时转折(响应式)、怎麽转?
方法1. (子)
https://getbootstrap.com/docs/4.6/layout/grid/#grid-options
<div class="row">
<div class="col-md-6 col-lg-6">随便1</div>
<div class="col-md-6 col-lg-6">随便2</div>
<div class="col-md-6 col-lg-12">随便3</div>
<div class="col-md-6 col-lg-12">随便4</div>
</div>
方法2. (父)
https://getbootstrap.com/docs/4.6/layout/grid/#row-columns
<div class="row row-cols-4">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
通常不可以把 <标签> 拿来 .class 或 #id
如:
<h1>Apple v1</h1>
h1是有意义的head,虽然你不是head 但给你一个一样的样式
<p class="h1">Apple v2</p>
但h1是一个<标签>,如果你看不顺眼,就直接拿她的效果(.css)复制过来==
<p style="font-size: 2.5em">Apple v3</p>
建议还是用在CSS,不要用在html,但也不阻止你用在html
https://www.w3schools.com/tags/tag_small.asp
如果跑不出东西 该采取的方式
结论:
1.查看版本相容性(IE?)
2.有没有引用错位置(CDN.FILE)
3.此版本有没有这个套件?
(5.0)
https://getbootstrap.com/docs/5.0/getting-started/introduction/
(4.6)
https://getbootstrap.com/docs/4.6/getting-started/introduction/
4.引用方法亦不同 Starter template
5.Js有没有引用到
6.权重与顺序
搜寻
7.大方向的时候(如标签)请直接搜寻大标
8.假设我要查询data-toggle 关键字可以是 html button data-toggle boostrap
9.F12 并查询xx
10.W3C比较差异
>>: 【Android-Span】 设置TextView特定位置颜色+插入图片!
大纲 目标 什麽是 union 什麽是 enum 实作一个泛型物件 参考资料 目标 做出一个物件,其...
随着2020年Covid-19疫情对全世界造成的剧烈冲击,许多企业被迫在转型与不转型之间做选择,所有...
大家好 继上次介绍的环控系统後本次要介绍如何将资料在DASHBORAD上将储存的资料用不同方式显示 ...
在开始运用之前,先来了解几个机器学习上常用的概念。 首先是交叉验证法(Cross-valid...
学习目标 if判断&switch case 、取得html元素 if判断 if(条件)-&g...