--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...