F2E合作社|共用項目margin與padding|Bootstrap 5網頁框架開發入門


Posted by itiswonderfall on 2021-11-18

前言

margin 和 padding 在網頁設計使用頻率很高,且語法輸入上也不難,一個翻譯成外邊距、另一個叫內邊距,常常會讓新手很困惑它們的差別,反正不管什麼內外邊距,少追點劇、未來無懼,看完這個入門課程後,若還有一些問題也可以看看 CSS保健室|marginCSS保健室|padding

cover

圖片來源

 


 

官方網站的 spacing 頁面

 

屬性設定

  • m 表示 margin( 外邊距 )
  • p 表示 padding( 內邊距 )

方向設定

  • t 表示上方,用於設定 margin-top 或 padding-top
  • b 表示下方,用於設定 margin-bottom 或 padding-bottom
  • s 表示開始( start ),如果是從左到右( LTR )的話用於設定 margin-left 或 padding-left ,如果是由右到左( RTL )則為 margin-right 或 padding-right
  • e 表示結束( end ),如果是從左到右( LTR )的話用於設定 margin-right 或 padding-right ,如果是由右到左( RTL )則為 margin-left 或 padding-left
  • x 表示水平軸,同時設定 left 和 right
  • y 表示垂直軸,同時設定 top 和 bottom
  • 空白 表示設定 margin 或 padding 的四個邊

尺寸設定

  • 0 設定 margin 或 padding 為 0
  • 1 設定 margin 或 padding 為 $spacer * 0.25 ( 預設 )
  • 2 設定 margin 或 padding 為 $spacer * 0.5 ( 預設 )
  • 3 設定 margin 或 padding 為 $spacer ( 預設 )
  • 4 設定 margin 或 padding 為 $spacer * 1.5 ( 預設 )
  • 5 設定 margin 或 padding 為 $spacer * 3 ( 預設 )
  • auto 設定 margin 為 auto

( 可以透過將項目增加到 $spacers Sass map 變數以新增更多尺寸 )

斷點設定

xs 使用固定格式 {屬性}{方向}-{尺寸} 命名,而 sm 、 md 、 lg 、 xl 、 xxl ,使用格式 {屬性}{方向}-{斷點}-{尺寸} 命名。

Breakpoint Class infix Dimensions
X-Small - <576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

 


 

範例

HTML

<div class="container pic-card">
    <div class="row">
        <div class="col-12 col-md-7 mb-2 mb-md-0">
            <div class="pic">
                <img src="https://picsum.photos/300/150?ramdom=10" class="w-100 img-thumbnail">
            </div>
        </div>
        <div class="col-12 col-md-7 ml-auto">
            <div class="text p-4">
                <h3>共用項目 margin 與 padding</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, aut nulla ducimus ipsum eum quaerat dignissimos?</p>
            </div>
        </div>
    </div>
</div>

CSS

.text {background-color: #ffa;}
@media screen and (min-width: 768px) {
    .pic-card .col-12:last-child {
        margin-top: -100px;
    }
}

桌機畫面

桌機畫面

手機畫面

手機畫面

 


 

參考資料

  1. Bootstrap v5.0.0-alpha2 的官方網站
  2. Bootstrap5 共用項目margin與padding-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
  3. Spacing · Bootstrap v5.0
  4. 間隔 (Spacing) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #margin #padding







Related Posts

關於 React 小書:state vs props

關於 React 小書:state vs props

Web Storage3: Local Storage & Session Storage

Web Storage3: Local Storage & Session Storage

初見狀態管理工具 Vuex (3) Mutations、Actions

初見狀態管理工具 Vuex (3) Mutations、Actions


Comments