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
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...