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 格式的圖示 提示:可以自