Bootstrap4網格系統+文字排版+顏色 簡單練習

来源:https://www.cnblogs.com/chenyingying0/archive/2020/04/14/12699137.html
-Advertisement-
Play Games

我現在學bootstrap是不是太遲了哈哈哈 先來個小案例熟悉下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <link rel="stylesheet" href="http ...


我現在學bootstrap是不是太遲了哈哈哈

先來個小案例熟悉下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <p>這是第一列</p>
            </div>
            <div class="col-sm-4">
                <p>這是第二列</p>
            </div>
            <div class="col-sm-4">
                <p>這是第三列</p>
            </div>
        </div>
    </div>
</body>
</html>

 

 

Bootstrap4 是 Bootstrap 的最新版本，與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關的部分變成了相關的組件。同時 Bootstrap.min.css 的體積減少了40%以上。

Bootstrap4 放棄了對 IE8 以及 iOS 6 的支持，現在僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。如果對於其中需要用到以前的瀏覽器，那麼請使用 Bootstrap3。

 

Bootstrap 要求使用 HTML5 文件類型，所以需要添加 HTML5 doctype 聲明。
HTML5 doctype 在文檔頭部聲明，並設置對應編碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> 
  </head>
</html>

 

為了讓 Bootstrap 開發的網站對移動設備友好，確保適當的繪製和觸屏縮放，需要在網頁的 head 之中添加 viewport meta 標簽

在iOS9中要想起作用，得加上"shrink-to-fit=no"

width=device-width 表示寬度是設備屏幕的寬度。
initial-scale=1 表示初始的縮放比例。
shrink-to-fit=no 自動適應手機屏幕的寬度。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

 

容器類：.container 和 .container-fluid

.container 類用於固定寬度並支持響應式佈局的容器。
.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器

 

 

 

 

Bootstrap4 網格系統
.col- 針對所有設備
.col-sm- 平板 - 屏幕寬度等於或大於 576px
.col-md- 桌面顯示器 - 屏幕寬度等於或大於 768px
.col-lg- 大桌面顯示器 - 屏幕寬度等於或大於 992px
.col-xl- 超大桌面顯示器 - 屏幕寬度等於或大於 1200px

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container" style="background:pink;">
        <div class="row">
            <div class="col-sm-4">
                <p>這是第一列</p>
            </div>
            <div class="col-sm-4">
                <p>這是第二列</p>
            </div>
            <div class="col-sm-4">
                <p>這是第三列</p>
            </div>
        </div>
    </div>

    <div class="container-fluid" style="background:lightblue;">
        <div class="row">
            <div class="col-sm-4">
                <p>這是第一列</p>
            </div>
            <div class="col-sm-4" style="background:lavender;">
                <p>這是第二列</p>
            </div>
            <div class="col-sm-4">
                <p>這是第三列</p>
            </div>
        </div>
    </div>
</body>
</html>

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container" style="background:pink;">
        <div class="row">
            <div class="col-sm-4">
                <p>這是第一列</p>
            </div>
            <div class="col-sm-4">
                <p>這是第二列</p>
            </div>
            <div class="col-sm-4">
                <p>這是第三列</p>
            </div>
        </div>
    </div>

    <div class="container-fluid" style="background:lightblue;">
        <div class="row">
            <div class="col-sm-4">
                <p>這是第一列</p>
            </div>
            <div class="col-sm-4" style="background:lavender;">
                <p>這是第二列</p>
            </div>
            <div class="col-sm-4" style="background:lavenderblush;">
                <p>這是第三列</p>
            </div>
        </div>
    </div>
</body>
</html>

 

 

這顏色太好看了，我可記住了

lavender--丁香紫，薰衣草紫

lavenderblush--玫瑰粉，琥珀粉，美哭

 

偏移列
偏移列通過 offset-*-* 類來設置。第一個星號( * )可以是 sm、md、lg、xl，表示屏幕設備類型，第二個星號( * )可以是 1 到 11 的數字。
為了在大屏幕顯示器上使用偏移，請使用 .offset-md-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 * 範圍是從 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4" style="background:lavender;">
                <p>這是第一列</p>
            </div>
            <div class="col-sm-4 offset-sm-4" style="background:lavenderblush;">
                <p>這是第二列</p>
            </div>
        </div>
    </div>
</body>
</html>

 

 

Bootstrap4 文字排版
Bootstrap 4 預設的 font-size 為 16px, line-height 為 1.5。
預設的 font-family 為 "Helvetica Neue", Helvetica, Arial, sans-serif。
所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。

 

Bootstrap 還提供了四個 Display 類來控制標題的樣式: .display-1, .display-2, .display-3, .display-4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="jumbotron text-center">
        <h1>my first bootstrap page</h1>
        <p>i am learning bootstrap</p>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-4" style="background:lavender;">
                <h1 class="display-1">display-1</h1>
                <h1 class="display-2">display-2</h1>
                <h1 class="display-3">display-3</h1>
                <h1 class="display-4">display-4</h1>
            </div>
            <div class="col-sm-4 offset-sm-4" style="background:lavenderblush;">
                <p>這是第二列</p>
            </div>
        </div>
    </div>
</body>
</html>

 

 

<mark> 為黃色背景及有一定的內邊距

<p>這是第二列 <mark>高亮文本</mark></p>

 

 

<abbr> 元素的樣式為顯示在文本底部的一條虛線邊框

<p>展示簡寫：<abbr title="chenyingying">cyy</abbr></p>

 

引用的內容可以在 <blockquote> 上添加 .blockquote 類

<blockquote class="blockquote">
                    <p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
                    <p class="blockquote-footer">From WWF's website</p>
                </blockquote>

 

 

<code> 元素的樣式

<p>這是一些html元素： <code>span</code>&nbsp;&nbsp;<code>h1</code></p>

 

 

<kbd> 元素的樣式

<p>這是鍵盤輸入樣式： <kbd>ctrl+c</kbd>&nbsp;&nbsp;<kbd>ctrl+v</kbd></p>

 

 

字體粗細和傾斜

                <p class="font-weight-bold">font-weight-bold</p>
                <p class="font-weight-normal">font-weight-normal</p>
                <p class="font-weight-light">font-weight-light</p>
                <p class="font-italic">font-italic</p>

 

 

文字大小寫

                <p class="text-lowercase">text-lowercase</p>
                <p class="text-uppercase">text-uppercase</p>
                <p class="text-capitalize">text-capitalize</p>

 

 

文字對齊

                <p class="text-left">text-left</p>
                <p class="text-center">text-center</p>
                <p class="text-right">text-right</p>
                <p class="text-justify">text-justify</p>
                <p class="text-nowrap">text-nowrap</p>

 

 

<p class="small">small</p>

 

 

讓段落更突出

<p class="lead">lead</p>

 

 

.pre-scrollable
使 <pre> 元素可滾動，代碼塊區域最大高度為340px,一旦超出這個高度,就會在Y軸出現滾動條

                <p>For multiple lines of code, use the pre element:</p>
                <pre>Text in a pre element
                is displayed in a fixed-width
                font, and it preserves
                both      spaces and
                line breaks.</pre>

                <p>If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:</p>
                <pre class="pre-scrollable">Text in a pre element
                is displayed in a fixed-width
                font, and it preserves
                both      spaces and
                line breaks.</pre>

 

 

.list-inline
將所有列表項放置同一行

                <ul class="list-inline">
                    <li class="list-inline-item">item1</li>
                    <li class="list-inline-item">item2</li>
                    <li class="list-inline-item">item3</li>
                </ul>

 

 

.list-unstyled
移除預設的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。
這個類僅適用於直接子列表項 (如果需要移除嵌套的列表項，需要在嵌套的列表中使用該樣式)

                <ul>
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                </ul>
                <ul class="list-unstyled">
                    <li>item1</li>
                    <li>item2</li>
                    <li>item3</li>
                </ul>

 

 

Bootstrap4 顏色

                <p class="text-muted">柔和</p>
                <p class="text-primary">重要</p>
                <p class="text-info">提示</p>
                <p class="text-warning">警告</p>
                <p class="text-success">成功</p>
                <p class="text-danger">危險</p>
                <p class="text-dark">深灰</p&g
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • React 中的生命周期函數
    生命周期函數指的是組件在某一時刻會自動執行的函數 constructor可以看成一個類的普通生命周期函數，但不是react獨有的生命周期函數 render() 是數據發生變化時會自動執行的函數，因此屬於react的生命周期函數 mounting只在第一次渲染時會執行 import React,{Co ...
  • asap非同步執行實現原理
    目錄 為什麼分析asap asap概述 asap源碼解析—Node版 參考 1.為什麼分析asap 在之前的文章 "async和await是如何實現非同步編程?" 中的 “淺談Promise如何實現非同步執行” 小節，提到了 Promise 非同步執行是通過 "asap" 這個庫來實現的。所以為了進一步深 ...
  • 分享數組概念、創建、賦值、長度與使用
    3-1什麼是數組?變數用來存儲數據，一個變數只能存儲一個內容,如果要存儲多個數據怎麼辦？此時就需要用到數組，數組是一個值的集合，每個值都有一個索引號，從0開始，每個索引都有一個相應的值，根據需要添加更多數值。 1 <script type="text/javascript"> 2 var myarr ...
  • JS 實現計算器功能
    括弧功能未實現，後續更 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit ...
  • 從 defineProperty 到 Proxy
    眾所周知，Vue 2.x 的數據綁定是通過 defineProperty。而在 Vue 3.x 的設計中，數據綁定是通過 Proxy 實現的，這兩者到底有何異同？ 一、definePropety defineProperty 是 Object 的一個方法，可以在對象上新增或編輯某個屬性，可編輯的內容 ...
  • React 中 ref 的使用
    實例：獲取button元素離頁面頂部的距離 ref寫在html元素上 import React,{Component,Fragment} from 'react'; import Child from './Child'; class Counter extends Component{ const ...
  • ES6---Promise 4:
    1. var p1 = new Promise((resolve, reject) => { }); var p2 = p1.then( result => { }, error => { } ); //可以看到p1和p2都是promise，還可以看到狀態 console.log(p1); cons ...
  • React添加事件
    React添加事件,和DOM上添加事件類似,但又有細微的不同. React添加事件,需要註意: 1.React的事件命名採用小駝峰(camelCase)的命名方式,DOM採用的是純小寫的方式; 2.使用JSX語法時,需要傳入一個函數作為事件的處理函數,DOM傳入的是一個字元串(雖然DOM中傳入的事件 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類