bootsrap 樣式筆記

2022-09-16 12:24:11 字數 2526 閱讀 8408

--blue: #007bff;

--indigo: #6610f2;

--purple: #6f42c1;

--pink: #e83e8c;

--red: #dc3545;

--orange: #fd7e14;

--yellow: #ffc107;

--green: #28a745;

--teal: #20c997;

--cyan: #17a2b8;

--white: #fff;

--gray: #6c757d;

--gray-dark: #343a40;

--primary: #007bff;

--secondary: #6c757d;

--success: #28a745;

--info: #17a2b8;

--warning: #ffc107;

--danger: #dc3545;

--light: #f8f9fa;

--dark: #343a40;

.text-muted:提示,使用淺灰色(#999)

.text-primary:主要,使用藍色(#428bca)

.text-success:成功,使用淺綠色(#3c763d)

.text-info:通知資訊,使用淺藍色(#31708f)

.text-warning:警告,使用黃色(#8a6d3b)

.text-danger:危險,使用褐色(#a94442)

.bg-

div bg-secondary progress-bar-striped 背景 透明 模糊

--breakpoint-xs: 0;

--breakpoint-sm: 576px;

--breakpoint-md: 768px;

--breakpoint-lg: 992px;

--breakpoint-xl: 1200px;

.lead 使段落突出顯示

.small 設定小文字 (設定為父文字的 85% 大小)

.btn-lg 這會讓按鈕看起來比較大。

.btn-sm 這會讓按鈕看起來比較小。

.btn-xs 這會讓按鈕看起來特別小。

.btn-block 這會建立塊級的按鈕,會橫跨父元素的全部寬度。

.mt-3 	 margin-top: 1rem !important;

.h-100 height: 100% !important;

.text-left 設定文字左對齊

.text-center 設定文字居中對齊

.text-right 設定文字右對齊

.text-justify 設定文字對齊,段落中超出螢幕部分文字自動換行

.text-nowrap 段落中超出螢幕部分不換行

class .pull-right 向右對齊

class .pull-left 向左對齊

class .form-inline 內聯

eg: class .form-horizontal 水平

向父 元素新增 class .form-horizontal。

把標籤和控制項放在乙個帶有 class .form-group 的 中。

向標籤新增 class .control-label。

eg: 名字

.text-lowercase	設定文字小寫

.text-uppercase 設定文字大寫

.text-capitalize 設定單詞首字母大寫

.initialism 顯示在 元素中的文字以小號字型展示,且可以將小寫字母轉換為大寫字母

.blockquote-reverse 設定引用右對齊

.list-unstyled 移除預設的列表樣式,列表項中左對齊 ( 和 中)。 這個類僅適用於直接子列表項 (如果需要移除巢狀的列表項,你需要在巢狀的列表中使用該樣式)

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

.dl-horizontal 該類設定了浮動和偏移,應用於 元素和 元素中,具體實現可以檢視例項

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

.show 強制元素顯示

.hidden 強制元素隱藏

.text-hide 將頁面元素所包含的文字內容替換為背景圖

.close 顯示關閉按鈕

.caret 顯示下拉式功能

.btn-link	讓按鈕看起來像個鏈結 (仍然保留按鈕行為)

.active 按鈕被點選

.disabled 禁用按鈕

**-group

<**>

<**>

xx class="**-group-xx"

如果要設定垂直方向的按鈕可以通過 .btn-group-vertical 類來設定:

Bootsrap學習之模態視窗

模態視窗在特定時間內用程式強制使用者互動。在大部分情況下,它們開啟並阻止主視窗的訪問,直到模態得以處理。在bootstrap中,有兩種方法可以切換模態框 modal 外掛程式的隱藏內容 identifier modal options 示例一 乙個靜態的模態視窗例項,如下面的例項所示 開始演示模態框...

flex CSS樣式筆記

css樣式筆記 css 支援使用內建的選擇器,通過本地名稱匹配元件例項 s button css 在stylename 屬性中支援多個類選擇器 使用空格分隔 s button.redtext s button.fonttype css 支援具有相同名稱和不同屬性的多個選擇器 如果選擇器中沒有重複的屬...

css樣式筆記

css 部分 使用border屬性可以在css中設定 邊框。border 1px solid black 1px指的是 邊框線粗細程度,solid指的是邊框樣式,solid是固體實線,black指的是邊框線的顏色。例子 firstname lastname bill gates steven job...