Day 9 (Bootstrap)

1.命名方式不可以用

10_XX
_XXX

英文开头


2.bootstrap是利用他人的css 套用


3.不要选5.0太新了 用4.6

https://getbootstrap.com/docs/4.6/getting-started/download/
https://ithelp.ithome.com.tw/upload/images/20210607/20137684ljjWN8VRRU.png
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/[email protected]/dist/css/bootstrap.css

  • 问题:档案用CDN or FILE?

(1)小专?
CDN优点:硬碟空间减少,缺点:坏掉怎麽办?
FILE:相反

(2)工作? 会有经手多人的问题,很多版本
CDN:万一坏掉就全歪掉
FILE:看原本公司怎麽走,跟着走 要死大家一起死XD

  • 到底要引用哪个CSS?
    1.问法:我现在看到4个CSS的本版 请问我要用哪一个?
    2.自己找的办法? 看最近一个网页引用哪个版本(多看几个)
    为什麽这样呢?因为大家都这样= = 所以不要乱改引用档。

6.取得下拉清单 Dropdown 的范例程序码

点选 bootstrap 官网 Documentation 连结
https://ithelp.ithome.com.tw/upload/images/20210607/20137684RvWLTY9Scr.png
方法1.左侧选单 Components > 找到 Dropdowns
方法2.在左侧选单上方输入 Dropdown 进行搜寻


7.为什麽自己的FILE不能使用套件?

确认网页是否可以正常执行?为什麽不能使用?(档案22_Local)


8.不能使用的问题所在可能?结果

  1. _Js
    jquery.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;
      }
  • 结论:bootstrap依旧有权重与顺序 
  • 但不要依赖important!
  • 如果你的前辈important!必须配合着跟着important!

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.col
15{$} => 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比较差异


<<:  Azure DNS 手把手基础教学

>>:  【Android-Span】 设置TextView特定位置颜色+插入图片!

[C 语言笔记--Day07] 如何用 C 语言实作一个泛型物件

大纲 目标 什麽是 union 什麽是 enum 实作一个泛型物件 参考资料 目标 做出一个物件,其...

公司转型要如何靠网路行销SEO布局及定位策略

随着2020年Covid-19疫情对全世界造成的剧烈冲击,许多企业被迫在转型与不转型之间做选择,所有...

序章

大家好 继上次介绍的环控系统後本次要介绍如何将资料在DASHBORAD上将储存的资料用不同方式显示 ...

Day3:交叉验证法(Cross-validation)

  在开始运用之前,先来了解几个机器学习上常用的概念。   首先是交叉验证法(Cross-valid...

JS语法学习Day5

学习目标 if判断&switch case 、取得html元素 if判断 if(条件)-&g...