1. 程式人生 > >bootstrap 圖示、樣式使用說明

bootstrap 圖示、樣式使用說明

1、小圖示使用說明 

圖示說明:http://www.wapadd.cn/icons/awesome/index.htm

<i class="fa fa-search"></i>詳情

<a class="btn btn-warning btn-xs">
	<i class="fa fa-search"></i>搜尋
</a>

 

2、元素背景顏色

我們先來看看元素背景的顏色有哪幾種?

一共五種背景色:分別是 bg-primary   bg-success    bg-info     bg-warning     bg-danger

<p class="bg-primary">我是bg-primary</p>
<p class="bg-success">我是bg-success</p>
<p class="bg-info">我是bg-info</p>
<p class="bg-warning">我是bg-warning</p>
<p class="bg-danger">我是bg-danger</p>
我們可以看到背景顏色的樣式分別為:

.bg-primary{  background-color:#337ab7;  }

.bg-success{  background-color:#dff0d8;  }

.bg-info{  background-color:#d9edf7 ;  }

.bg-warning{  background-color:#fcf8e3 ;  }

.bg-danger{  background-color:#f2dede ;  }

我們可以根據需要對這些樣式進行選取和修改;

 

3、文字顏色,Bootstrap.css

<p class="text-muted">我是muted</p>
<p class="text-primary">我是primary</p>
<p class="text-success">我是success</p>
<p class="text-info">我是info</p>
<p class="text-warning">我是warning</p>
<p class="text-danger">我是danger</p>   

預設情況下bootstrap給出的文字顏色樣式為:

.text-muted{  color: #777 ;  }

.text-primary{  color: #337ab7 ;  }

.text-success{  color: #3c763d ;  }

.text-info{  color: #31708f ;  }

.text-warning{  color: #8a6d3b ;  }

.text-danger{  color: #a94442 ;  }

我們也可以基於這些樣式進行修改和新增,得到符合自己需求的樣式;

 

4、以下這些可以通過媒體查詢結合大型、小型和中型裝置,實現內容對裝置的顯示和隱藏

相關推薦

bootstrap 圖示樣式使用說明

1、小圖示使用說明  圖示說明:http://www.wapadd.cn/icons/awesome/index.ht

Qt設定標題欄圖示文字和標題欄樣式的方法

1.在專案資料夾裡建立名為*.rc的檔案,如mya.rc。 2.檔案中寫入IDI_ICON1 ICON DISCARDABLE "my.ico" 其中,my.ico為圖示的檔名。 3.將檔案my.ico拷貝到專案資料夾內。 4.若在visual studio中開發,在解決

Bootstrap學習筆記】1.Bootstrap介紹排版樣式表格和按鈕表單和圖片

四、表單和圖片 學習內容: .form-control 表單群組 內聯表單 表單合組 水平排列 複選框和單選框 下拉列表 校驗狀態 新增額外圖示 控制大小 圖片 .form-control .form-control <!--可定

DOM內容操作和自定義樣式改變

abcdefg result 定義 tel class abcde inner 參數 fun 自定義 function 方法名或函數名(參數1,參數2,、、、) { 方法體; return返回值;(可不寫) } function a

sass03 變量樣式導入

light pad tex 樣式 sna ngs 全局 sas efault demo1.scss @import "css.css"; //導入css文件 @import "http://ss/xx"; //導入css文件 @import url(css.c

Spring(四)-- JdbcTemplate式事務

子類 xmla 文件中 epo style 如果 2.2.0 not 可變參 1.Spring提供的一個操作數據庫的技術JdbcTemplate,是對Jdbc的封裝。語法風格非常接近DBUtils。 JdbcTemplate可以直接操作數據庫,加快效率,而且學這個Jdb

重修課程day54(bootstrap之css樣式

mit tip erro context ups highlight tac esc boot 一 bootstrap的介紹  Bootstrap是將html,css和js的代碼打包好了,只管我們拿來調用。是基於jquery開發的。  使用BootCDN提供的免費CDN加速

Bootstrap表單樣式

put set png tex leg label 數據庫 sel 樣式 <form class="form-horizontal" role="form"> <fieldset>

oracle存儲過程變量for循環

compute 使用方式 數組 ++ 查詢 lib money sch ear oracle存儲過程、聲明變量、for循環 1、創建存儲過程 create or replace procedure test(var_name_1 in type,var_name_2

各種距離 歐式距離曼哈頓距離切比雪夫距離閔可夫斯基距離標準歐氏距離馬氏距離余弦距離距離傑拉德距離相關距離信息熵

form 密碼學 一行 and gif 國際象棋 matlab 三維空間 ffi 1. 歐氏距離(Euclidean Distance) 歐氏距離是最容易直觀理解的距離度量方法,我們小學、初中和高中接觸到的兩個點在空間中的距離一般都是指歐氏距離。 二維平面上點a(x1,

關於bootstrap中css樣式與自己設置的css樣式相撞問題

找到 審查 頁面 可能 網頁 設置 顯示效果 顯示 元素 1.在對網頁進行布局前就先將bootstrap包中的東西導入到自己的頁面中去。自己定義的css樣式導入在bootstrap之後,可以起到當類名與bootstrap重復時對bootstrap樣式踐行覆蓋的作用。 2.盡

JS---預解析提升

define div script 處理 聲明 cti style window對象 變量 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g

java一維數組的定義及排序

test sel 定義 靜態 for ram temp ++ arr public class TestArray { public static void main(String[] args) { /** 數組聲明及動態初始化

bootstrap下拉樣式

1,前端樣式: 2,html程式碼:   <div class="dropdown" style="margin-top:8px"> <button class="btn btn-default dropdown-toggle" type="

Android系統預置圖示——桌面小部件桌面圖示桌面資料夾

一、預置圖示介紹 1、在裝置首次啟動完成後,待機桌面上已經預置了一些圖示。這些圖示是在首次開機後,Launcher 會從配置檔案中讀取預置圖示的有效資訊,存入資料庫,然後讀取資料庫後進行載入預置圖示。 2、參考 我寫的“Launcher3佈局的佈局配置 ”,我們可以確認裝置使用的是哪個 pr

css基礎:樣式之定位樣式之隱藏二級選單多個列表轉表格圖片精靈技術

<html lang="en"><head>    <meta charset="UTF-8">    <title>樣式之定位position</title>    <style&g

郎平許海峰獲改革開放傑出貢獻表彰人選,

南樂縣 阿里巴巴集團董事局主席馬雲發表致股東的公開信表示:生意難做之時,正是阿里巴巴兌現“讓天下沒有難做的生意”的使命之時。,阿里巴巴(NYSE:BABA)今日釋出了截至2018年9月30日的2019財年第二季度財報(注:阿里巴巴財年與自然年不同步,從每年的4月1日開始,至第二年的3月31日結束)。 財報中

面板可配置化:變數樣式分離

之前面板開發了一個版本,抽是抽出來了,但是變數只抽出了幾個顏色,沒什麼價值(上個版本開發過程), 這次我又進行了一次迭代,現在是一個較成熟的版本了。整體理一下思路,可以總結為3步走和2層架構: 3步走 第1步:抽取出面板相關樣式 面板是樣式的子集,想要做面板的管理,首先要把涉及到的樣式

jQuery初識之選擇器樣式操作和篩選器(模態框和選單示例)

一、jQuery 1、介紹 jQuery是一個快速、簡潔的JavaScript框架,是繼Prototype之後又一個優秀的JavaScript程式碼庫(或JavaScript框架)。 jQuery設計的宗旨是“write Less,Do More”,即倡導寫更少的程式碼,做更多的事情。 它封裝J

MUI框架-14-使用自定義icon圖示引入阿里巴巴向量圖示

MUI框架-14-使用自定義icon圖示、引入阿里巴巴向量圖示 首先介紹介紹一下,前端必備的非常強大的 阿里巴巴向量圖示庫:地址是:http://www.iconfont.cn/ 這裡有豐富,精美,且免費使用的向量圖示 怎麼應用到自己的專案中呢? 方法一:直接下載,png 格式的圖示 提示:可以自