一定要用Bootstrap吗? => 自己决定
我朋友说Bootstrap业界没人用 => 104查就知道了
要怎麽使用部分的Bootstrap
(1)不要修改引用档
(2)自己写
(3)看有没有支援到 CSS files , JS files 有可以分别引用
https://getbootstrap.com/docs/4.6/getting-started/contents/
试试看改变class有甚麽变化?
如果不喜欢可以删掉不要用或改掉~
若使用者为手机给小图,使用电脑给大图,贴心用
假图制作网站:https://dummyimage.com/
<picture>
<source media="(min-width: 650px)" srcset=".jpg" />
<source media="(min-width: 465px)" srcset=".jpg" />
<img src=".jpg" style="width: auto" />
</picture>
.text-left
.text-center
.text-right
因为span是行内元素所以没有空间可以移动,区块(block)的才可以使用
<span class="text-center">Cat</span>
<p class="text-center">Cat</p>
<div class="text-center">Cat</div>
<h1 class="text-center">Cat</h1>
https://getbootstrap.com/docs/4.6/layout/grid/#grid-options
<p class="text-sm-right">Cat</p>
<p class="text-md-right">Apple</p>
<p class="text-lg-right">bee</p>
<p class="text-xl-right">dog</p>
或
当文字溢出时,使用「…」来表达 .text-truncate
width: 25% => 会配合萤幕变动
<span class="d-inline-block text-truncate" style="width: 25%"> CatCatCatCatCatCatCatCatCatCatCatCatCatCat </span>
https://getbootstrap.com/docs/4.6/utilities/spacing/
{property}{sides}-{size} for xs
{property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
2.property
只能用m or p
3.sides
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
4.size
0 1 2 3 4 5 auto
如:margin-top * 0.25= mt-1
px-md-5
m-margin
p-padding
w-width
h-height
有些数字没有,就必须自己设定 如w-30
https://getbootstrap.com/docs/4.6/utilities/sizing/
col-1=>12份里面,要站1份=>8.333%
w-25=>在100%里面占25=>四分之一
mt-1 =>0.25
flex-grow-1 =>分配位置 只有0.1
order-1 =>越小越前面,共12
同CSS 会整个被推下去
.box {
background-color: red;
height: 200px;
}
<div class="box">
<div class="mt-5">Apple</div>
</div>
解决办法
.box {
background-color: red;
height: 200px;
/* 方法1. */
/* padding: 1px; */
/* 方法2. */
/* border: 5px solid black; */
}
.box > div {
width: 100px;
height: 100px;
background-color: royalblue;
/* 方法3.*/
display: inline-block;
}
<<: Azure CDN (akamai) 强制置换图片教学
>>: 伸缩自如的Flask [day 25] Flask with web cam
前言:甚麽是基数排序法?在我刚刚接触这个名词的时候心中满是问号,有很多排序法看到名称或许就能猜出是怎...
从本章开始会进入 Angular Form 的部分,在现代网页中与使用者互动的过程变得越来越重要,其...
翻翻卡 ( 卡牌记忆 ) 教学原文参考:翻翻卡 ( 卡牌记忆 ) 这篇文章会介绍,如何在 Scrat...
大家好,我是乌木白,今天要和大家介绍如何从 Chrome Devotools,来查看 AJAX 的...
上一篇定义了IAM里面会看到的名词,今天我们来看一下AWS Console里面要怎麽建置IAM Us...