原创 4 Bootstrap4組件——卡片

4 Bootstrap4組件——卡片1 卡片內容1.1 卡片標題1.2卡片主體1.2.1 文本1.2.2 超鏈接1.3 圖片1.4 列表組1.4.1 基本結構1.4.2 列表標題1.4.3 列表頁眉頁腳2 縮放2.1 使用柵格系統

原创 4 bootstrap4組件——麪包屑導航

4 bootstrap4組件——麪包屑導航1、基本結構2、分隔符原理 在通過BootStrap的內置CSS樣式,自動添加分隔符、並呈現導航層次和網頁結構,從而指示當前頁面的位置爲訪客創造優秀用戶體驗。 1、基本結構 <nav ar

原创 3 Bootstrap4樣式

3 Bootstrap4樣式3.1 文本1、標題2、內聯文本元素3、文本對齊方式4、英文大小寫3.2 列表3.3 表格1、表格樣式2、響應式表格3、狀態類3.4 圖片1、圖片的樣式2、縮略圖處理3、圖片對齊處理4、響應式圖片3.5

原创 水平方向無縫滾動的圖片特效

水平方向無縫滾動的圖片特效目錄1 從左向右無縫滾動1.1 編寫HTML文件1.2 編寫CSS樣式1.3 編定JS腳本2 從右向左無縫滾動2.1 編寫HTML文件2.2 編寫CSS文件2.3 編寫JS腳本 1 從左向右無縫滾動 1.

原创 4 Bootstrap4組件——按鈕和按鈕組

4 Bootstrap4組件——按鈕和按鈕組1 按鈕1.1 按鈕的樣式1.2 按鈕標籤1.3 輪廓按鈕1.4 按鈕的尺寸1.5 按鈕的狀態1.6 切換按鈕2 按鈕組2.1 基本示例2.2 複選框組2.3 單選框組2.4 按鈕工具欄

原创 4 Bootstrap4組件——徽章(Badges)

4 Bootstrap4組件——徽章(Badges)4.1 各種顏色類型的徽章4.2 膠囊徽章 徽章(Badges)主要用於突出顯示新的或未讀的項。如需使用徽章,只需要將 .badge 類加上帶有指定意義的顏色類 (如 .badg

原创 4 Bootstrap4組件——警告提示框(alert)

4 Bootstrap4組件——警告提示框(alert)1 警告框樣式1、基礎樣式2、內部超連接顏色3、額外附加信息2 警告框組件1、使用`data-dismiss="alert"`2、使用腳本 警告提示框組件通過提供一些靈活的預

原创 CSS繪製三角形圖標

CSS繪製三角形圖標目錄1CSS繪製三解形圖標原理2 頁面效果3 HTML結構4 CSS樣式 1CSS繪製三解形圖標原理 對內容容器進行相對定位,對內容容器的僞元素:before和:after進行絕對定位,設置top、right、

原创 Bootstrap4樣式之flex樣式

1、開啓Flex佈局樣式 使用.d-flex和.d-inline-flex實現開啓flex佈局樣式,也可以使用.d-[sm|md|lg|xl]-*之前再不同屏幕開啓flex佈局樣式 <div class="d-flex"> <d

原创 Bootstrap4樣式之工具類

Bootstrap4樣式之工具類1 構建關閉按鈕2 實現浮動3 隱藏標籤元素4 設置區域溢出的顯示5 設置元素可見與不可見6 設置內容對齊方式7 設置內邊距8 設置外邊距。9 設置元素尺寸10 設置元素最大最小尺寸爲100%11

原创 選擇卡Tab排版

選擇卡Tab排版目錄1 選項卡切換原理2 編寫HTML文件3 編寫CSS樣式4 編寫JS腳本 1 選項卡切換原理 選項卡切換包括2項關鍵技術: 1、選項卡標籤項與選項卡內容項的關聯 實現關聯最簡單的辦法是建立HTML結構時就使選項

原创 2 Bootstrap4的基本架構

2 Bootstrap4的基本架構2.1 響應開發技術2.2 Bootstrap的柵格佈局2.2.1 佈局原理2.2.2 自動佈局列1、等寬佈局 (.col)2、等寬多行 (.w-100)3、設置一列寬度4、可變寬度的彈性空間2

原创 Bootstrap4的柵格佈局

Bootstrap4柵格佈局1 柵格容器2 柵格佈局的步驟3 關於列3.1 設置列寬3.1.1 平均分配柵格3.2.2 指定列寬3.2.3 可變的列寬3.3 列拆分3.3.1 自動拆分3.3.2 手動拆分3.3.3 響應式拆分3.