自學日記

學習程式相關知識及學習法

0%

Bootstrap 5 功能介紹

Bootstrap 5 基礎簡介

介紹初步排版內容及container相關應用及如何RWD

從檢查器觀察套用顏色

套用字型大小

  1. 第一種方式:class命名 h1~h6
    如果想使用h1-h6的樣式,不一定要套HTML標籤,可以在class上設定,如下
  2. 第二種方式:class命名 display-16
    使用**class display-1
    6**顯示如下

前導部分

  1. 使用 .lead 讓一個段落脫穎而出。
    1
    2
    3
    <p class="lead">
    This is a lead paragraph. It stands out from regular paragraphs.
    </p>
  • 顯示效果
  1. 使用<del><ins>較新
    1
    2
    3
    4
    5
    6
    7
    8
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
    <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
    <p><u>This line of text will render as underlined.</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>

清除block區塊

使用<list-inline如果要有區隔(空白)附上<list-inline-item>

將過長文字去掉

使用<text-truncate>將過長文字去掉,過長的文字會用…顯示,

圖片

隨視窗縮放圖片

<class="img-fluid">隨著視窗縮放圖片

圖片加圓角

<class ="rounded"

在區塊上加邊框

加上


水平置中圖片

mx-auto=>margin auto
或者
<class="text-center">

格線系統

斷點

RWD
display-none可以套用以上尺寸來達到多大視窗隱藏

行動版要隱藏 桌面板要顯示:d-none d-xl-block
皆以行動版為預設>lg以上是桌面

container

格線系統

外層至少要有一層container,不會有水平卷軸

  • col-auto隨內容調整寬度

RWD


邏輯要這樣:

遇單欄可不製作


預設即為單欄

Gutter

兩個容器兩側皆會有padding,


垂直水平皆套用

RWD

Flex與bootstrap之間的關聯