Bootstrap 筆記

来源:https://www.cnblogs.com/risejl/archive/2022/09/26/16729487.html
-Advertisement-
Play Games

react腳手架創建幾種方式 node v16.17.0 npm 8.15.0 yarn 3.2.3 vite 3.1.3 配置less-loader npm 首先通過 npm 方式全局安裝 create-react-app npm install -g create-react-app 查看是否安 ...


Bootstrap

Bootstrap 是預編寫的 CSS 和 JavaScript 代碼段(chunk)的集合。

引入

任何 Web 應用,都可以通過添加如下代碼到 HTML 的 head 標簽中來引入 Bootstrap 。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<div class="container-fluid">
  <!-- something -->
</div>

其中 rel 表示該 link 用於樣式表,href 表明 Bootstrap 的地址。

或者可以把 Bootstrap 作為 JavaScript 庫引入,在 body 標簽底部放入 script 標簽。

<body>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

其中 src 表示 Bootstrap 的地址。

Fluid

Bootstrap 會根據屏幕大小來動態調整 HTML 元素的大小————因此稱為 Responsive Design(響應式設計)。

響應式設計 Responsive

現在通過 Bootstrap,只需要為 image 標簽上設置 class 屬性為 img-responsive , 就可以讓它完美地適應頁面的寬度了。

<img class="img-responsive" src="">

文本

居中

只需要將元素的 class 屬性設置為 text-center 就可以實現。

<h2 class="text-center">CatPhotoApp</h2>

顏色

使用 text-XX 來表示文本顏色,其中 XX 和下列按鈕顏色,相同.

// Primary // blue
// Secondary // grey
// Success // green
// Danger // red
// Warning // yellow
// Info // skyblue
// Light // whie
// Dark // black
// Link // anchor

按鈕

Bootstrap 的 button 元素有著獨有的、比預設 HTML 按鈕更好的樣式風格。

<button class="btn btn-default">Like</button> // white color

塊級元素按鈕

通過為按鈕添加 class 屬性 btn-block 使其成為塊級元素,按鈕會伸展並填滿頁面的整個水平空間,後續的元素會流到這個塊級元素的下方,即 "另起一行"。

  <button class="btn btn-default btn-block">Like</button>

按鈕不同主題

btn-primary class 的顏色是應用的主要顏色。 這樣 “突出顯示” 是引導用戶按部就班進行操作的有效辦法。primary 被稱為 modifier 修改器,因為這部分是可以改動的。

修改器改變了組件的視覺樣式。

  <button class="btn btn-primary btn-block">Like</button>
// blue color

可選操作樣式

Bootstrap 有著豐富的預定義按鈕顏色。 淺藍色的 btn-info class 通常用在備選操作上。

  <button class="btn btn-info btn-block">Info</button>
// 淺藍

危險

紅色 btn-danger class 用來提醒用戶此行為具有破壞性

<button class="btn btn-danger btn-block">Delete</button>

柵格系統

Bootstrap 經常使用 container 作為柵格系統的父/根元素。

Bootstrap 具有一套 12 列的響應式柵格系統,可以輕鬆的將多個元素放入一行並指定它們的相對寬度。 Bootstrap 的大部分 class 屬性都可以應用在 div 元素上。

Bootstrap 的列寬取決於用戶的屏幕寬度。 比如,手機有著窄屏幕而筆記本電腦有者更大的屏幕.

就拿 Bootstrap 的 col-md-* class 來說。 在這裡, md 表示 medium (中等的), 而 * 是一個數字,說明瞭這個元素占有多少個列寬度。 這個例子就是指定了中等大小屏幕(例如筆記本電腦)下元素所占的列寬度。

使用 col-xs-* , 其中 xs 是 extra small 的縮寫 (比如窄屏手機屏幕), * 是填寫的數字,代表一行中的元素該占多少列寬。

斷點,類首碼和維度對應:

  • Extra small - xs - < 576px , 該項為預設值,因為 Bootstrap 是 mobile-first 的。
  • Small - sm - >= 576px
  • Medium - md - >= 768px
  • Large - lg - >= 992px
  • Extra large - xl - >=1200px
  • Extra extra large - xxl - >= 1400px
<div class="row">
    <div class="col-xs-4">
  <button class="btn btn-block btn-primary">Like</button>
  </div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-info">Info</button></div>
  <div class="col-xs-4">
  <button class="btn btn-block btn-danger">Delete</button></div>
  </div>

行內元素

使用 span 標簽來創建行內元素。 可以把不同的元素放在同一行,甚至能為一行的不同部分指定不同樣式。

<p>Top 3 things cats <span class="text-danger">hate:</span></p>

Font-Awesome

Font Awesome 是一個非常便利的圖標庫。 通過 webfont 或矢量圖的方式來使用這些圖標。 這些圖標就和字體一樣, 不僅能通過像素單位指定它們的大小,它們也同樣會繼承父級 HTML 元素的字型大小。

引入:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

i 元素原本是用來表示斜體文字內容的;不過現在,用它來表示圖標也很常見。 只需要為 i 元素添加相應的 class 就可以讓它展示圖標,比如:

<i class="fas fa-info-circle"></i>
<i class="fas fa-thumbs-up"></i> 
<i class="fas fa-trash"></i></i>

表單

單選按鈕

Bootstrap 的 col-xs-* class 也可以用在 form 元素上! 這樣就可以在不關心屏幕大小的情況下,將的單選按鈕均勻的平鋪在頁面上。

<div class="row">
<div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label></div>
    <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Loving</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Lazy</label></div>
    <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Crazy</label></div>
    </div>

覆選框

Bootstrap 的 col-xs-* 可應用於所有的 form 元素上,包括覆選框! 這樣就可以不必關註屏幕大小,均勻地把覆選框放在頁面上了。

<div class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
  <div class="col-xs-4"></div>
</div>

輸入框

可以在 submit button 元素內加上 <i class="fa fa-paper-plane"></i>,來添加 Font Awesome 的 fa-paper-plane 圖標。

所有文本輸入類的元素如 <input><textarea><select> 只要設置 .form-control class 就會占滿100%的寬度。

<input class="form-control">

標題

<h3 class="text-primary text-center">jQuery Playground</h3>

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6"></div>
    <div class="col-xs-6"></div>
  </div>
</div>

Wells

Bootstrap 有一個叫作 well 的 class,作用是使界面更具層次感。

<div class="well">
  </div>

記住,可以這樣給一個元素設置 id:

<div class="well" id="center-well">

給左邊的塊設置 id 為 left-well。 給右邊的塊設置 id 為 right-well


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.加拿大創新、科學和經濟發展部 (ISED) 於 2022 年 9 月 9 日發佈了第 2022-CEB001 號通知。 該通知包括關於無線電標準規範 RSS-195 “無線通信服務 (WCS) 設備在 2305-2320 MHz 和 2345-2360 MHz 頻段”第 2 版的指南,旨在重申 ...
  • 數據表的基本操作. MySQL 資料庫支持多種數據類型,大致可以分為 3 類:數值類型、日期和時間類型、字元串(字元)類型。 (1)數值類型 數值類型用於存儲數字型數據,這些類型包括整數類型(TINYINT、SMALLINT、MEDIUMINT、INT、BIGINT),浮點數類型(FLOAT、DOU ...
  • 使用Mysql的zip壓縮包解壓版,下載之後需進行一定的配置,才能使用它。 下麵對Mysql壓縮包版的安裝方法進行詳細的描述,如有疑問或錯誤,望及時反饋。 首先,mysql的官方下載地址點我進行下載 1. 根據你要下載的電腦相應版本,點擊Download跳轉到下載界面。 2. 之後你會看到讓你登陸或 ...
  • 主從複製 + 分庫分表 要講主從複製,首先來看看MySQL自帶的日誌文件。 日誌 錯誤日誌 錯誤日誌是 MySQL 中最重要的日誌之一,它記錄了當 mysqld 啟動和停止時,以及伺服器在運行過程中發生任何嚴重錯誤時的相關信息。當資料庫出現任何故障導致無法正常使用時,建議首先查看此日誌文件。 該日誌 ...
  • 聽不見、聽不清、聽不懂,這是全國上千萬聽障群體的真實寫照。由於聽力的局限,他們在求學、工作、就醫、出行等方面都面臨巨大挑戰。AI時代,全行業為信息無障礙建設形成強大合力,但聽障群體依然面臨著冷冰冰的現實:專業語言服務人員的稀缺、溝通輔助器具的不完備,甚至來自社會的偏見及誤解…… “聾人只要通過助聽設 ...
  • 如果有一天,周遭的世界突然變得很安靜,動聽美妙的音樂,在你看來只是沉寂;振奮人心的演講,對你而言只是默劇;大自然的千里鶯啼,於你來說也只是畫捲。你會不會感到害怕? 而有這麼一群人,每天都在與這世界無聲交流著,他們就是聽力障礙人士。據2006年第二次全國殘疾人抽樣調查顯示,我國的聽力殘疾人約2780萬 ...
  • 最基礎的指針如下: int a; int* p = &a; 答:p指向a的地址,&是取a的地址。*指的是指針中取內容的符號。 2.str[]和str*的區別: char str1[] = "abc"; char str2[] = "abc"; const char str3[] = "abc"; c ...
  • Array 對象 所有方法 concat() 方法 合併多個數組,返回一個新數組 join() 方法 將數組合併為字元串,用指定的字元分割 pop() 方法 刪除成員(從後) 並返回該被刪除的元素 shift() 方法 刪除成員(從前) 並返回該被刪除的元素 splice() 方法 刪除多個元素 並 ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...