bootstrap Class樣式學習筆記

2021-09-27 07:10:11 字數 1616 閱讀 7219

1. 設定bootstrap響應式頁面

引入bootstrap css檔案

將html內容放置在 class為container-fluid的盒子中

2. 適應手機端

class = 『img-responsive』

3. 文字的居中以及樣式

class = 『text-center』 // 文字居中

class = 『text-primary | text-info | text-danger』 // 文字顏色(深藍 | 淺藍 | 紅色)

4. bootstrap各個按鈕

class = 『btn』 // 形成按鈕樣式(乙個灰色按鈕)

class = 『btn-block』 // 形成塊級按鈕(寬度鋪滿父元素)

class = 『btn-primary | btn-info | btn-danger『 // 按鈕顏色(深藍 | 淺藍 | 紅色)

5. boostrap完成柵格布局

簡單來說bs布局把頁面橫軸分為12個柵格可以通過設定,決定元素占用幾格。

class = 『row』 // 子元素從左到右平均布局,放不下的元素會換行(類似於flex-direction = 『row』),行容器。row不會生成邊距

class = 『col-md-x』 // 設定柵格元素占用柵格數量,md為在中型尺寸上的布局(ipad等),還可以取值為xs(小螢幕)。 ,x為設定占用柵格的數值(想對元素使用此屬性時,要在元素外巢狀div,在外層div中使用此class)

柵格布局圖如下:

6. 新增font awesome圖示

第一部在html head部分linkfont awesome的css檔案

link入檔案後則可以使用圖示了

新增圖示常用於 i 標籤中,為 i 元素新增class類可轉換為圖示

圖示類名可以在官網上檢視 :鏈結

7.input輸入框樣式

class = 『form-control』 // 乙個簡潔的輸入框

8. well容器

class = 『well『屬性:它能顯示一種具有視覺深度層次感的列,會有一定邊距,更加方便美觀。

well列中可以使用button等標籤實現各種樣式。

9. 通過新增空樣式class更好區別開每個類似的div

為元素新增空class或id,可以方便js找到每個元素

android Preference相關樣式修改

首先,preference相關的東西都是以list的形式展現給大家的,所以,修改的樣式一般可以分為2類 1.listitem背景修改。2.listitem具體view修改。我們分別對下面四種情況進行分析。1.activity繼承自preferenceactivity 1 可以通過getlistvie...

平行樣測量

平行樣 平行樣分析是指同一樣品的兩份或多份子樣在完全相同的條件下進行同步分析。一般是做雙份平行。對於某些要求嚴格的測試,例如標定標準溶液 檢校儀器等,也有同時做3 5份平行測定的。平行樣分析反映的是分析結果的精密度,可以檢查同批測試結果的穩定情況。在日常工作中,可按照樣品的複雜程度 所用方法和儀器的...

什麼樣的教育就有什麼樣孩子!

寵出來的孩子 危險 捧出來的孩子 霸道 慣出來的孩子 任性 嬌出來的孩子 脆弱 打出來的孩子 逆反 罵出來的孩子 胡塗 逼出來的孩子 出格 磨出來的孩子 堅強 苦出來的孩子 懂事 教出來的孩子 傳統 闖出來的孩子 勇敢 搏出來的孩子 成功 表揚出的孩子 自信 溺愛出的孩子 依賴 哄出來的孩子 虛偽 ...