用户投稿1.命名方式不可以用
10_XX
_XXX
英文开头
2.bootstrap是利用他人的css 套用
3.不要选5.0太新了 用4.6
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
4.min是把空白都省略 所以体积小可以上线
bootstrap.min.css
所以很大的机率
bootstrap.css
可以找到原未压缩档
5.CDN? Content Delivery Network
https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css
问题:档案用CDN or FILE?(1)小专?
CDN优点:硬碟空间减少,缺点:坏掉怎么办?
FILE:相反
(2)工作? 会有经手多人的问题,很多版本
CDN:万一坏掉就全歪掉
FILE:看原本公司怎么走，跟着走 要死大家一起死XD
1.问法:我现在看到4个CSS的本版 请问我要用哪一个？
2.自己找的办法？ 看最近一个网页引用哪个版本(多看几个)
为什么这样呢？因为大家都这样= = 所以不要乱改引用档。
6.取得下拉清单 Dropdown 的範例程式码
点选 bootstrap 官网 Documentation 连结
方法1.左侧选单 Components > 找到 Dropdowns
方法2.在左侧选单上方输入 Dropdown 进行搜寻
7.为什么自己的FILE不能使用套件?
确认网页是否可以正常执行？为什么不能使用?(档案22_Local)
办法1.官方对比 整理！！
观察Starter template使用顺序?怎么使用?
https://getbootstrap.com/docs/4.6/getting-started/introduction/
办法2.
F12 看红色叉烧包xx直接改 或 xx搜寻
8.不能使用的问题所在可能？结果
_Jsjquery.min.js popper.min.js
别人写的 bootstrap拿来用 这两个js不是必要给你的 请自己去抓
2.差异在顺序!!
虽然官方在<body> 为了上课方便放<head><script src="../_js/jquery.min.js"></script><script src="../_js/popper.min.js"></script><script src="../_js/bootstrap.min.js"></script>9.所以遇到问题的解决办法
1.大方向的时候(如标籤)请直接搜寻大标
2.假设我要查询data-toggle 关键字可以是
html button data-toggle boostrap
3.F12 并查询xx
4.版本问题要看官方文件
10.Bootstrap 版本v3 vs. v4
版本跟自写的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; }11.如果看了W3C觉得跟自己的不一样
1.搜寻CSS,方式".col(空格)"
2.直接看看里面跟自己写的差异去比较
12.Bootstrap 版本4的样式清单
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
13.emmet
div.row
div.col15
div.col15{$} => 1~15
table>tr>td*3
div#Id
14.Bootstrap 4 Grids
(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>15.Bootstrap的标籤用法抉择?
通常不可以把 <标籤> 拿来 .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>16.Small?
建议还是用在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比较差异
微信扫一扫打赏
支付宝扫一扫打赏
