Bootstrap -- 文本，背景，其他樣式

-Advertisement-

Bootstrap -- 文本，背景，其他樣式 1. 文本樣式：展示了不同的文本顏色使用文本樣式： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ...

1. 文本樣式：展示了不同的文本顏色

使用文本樣式：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>    
    <p class="text-primary">樣式 "text-primary"。</p>   
    <p class="text-success">樣式 "text-success"。</p>   
    <p class="text-warning">樣式 "text-warning"。</p>   
</body>
</html>

View Code

樣式效果：

2. 背景樣式：展示了不同的背景顏色

使用背景樣式：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>    
    <p class="bg-primary">樣式 "bg-primary"。</p>   
    <p class="bg-success">樣式 "bg-success"。</p>   
    <p class="bg-warning">樣式 "bg-warning"。</p>   
</body>
</html>

View Code

樣式效果：

3. 其他樣式

使用樣式：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test bootstrap</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"> 
    <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>    
    <p>下拉樣式
      <span class="caret"></span>
    </p>
    <div class="pull-left">向左快速浮動</div>
    <div class="pull-right">向右快速浮動</div>
</body>
</html>

View Code

樣式效果：

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

Blob, Uint8Aray, atob/btoa in lt IE9 browser

Blob, Uint8Aray, atob/btoa in lt IE9 browser ...
用Electron開發企業網盤之分片下載（一）--通信

效果展示項目背景：由於瀏覽器的限制，web批量下載體驗不好以及無法下載文件夾。採用Electron技術，通過js開發PC應用程式，著力解決批量下載、斷點續傳、文件夾下載等問題。配合網頁版網盤使用，單個小文件使用瀏覽器內置下載，單個大文件、多文件、文件夾調用PC應用程式，提升下載體驗。技術棧 E ...
vue中刷新頁面時去閃爍，提升體驗方法

首先在最外層div添加v-if="isReloadAlive"，並創建變數isReloadAlive = true 隨後添加provide()以及reload方法，如下： export default { provide() { return { reload: this.reload } }, d ...
圖學ES6-6.數值的擴展

...
vue-route-transition路由前進後退動畫

vue route transition vue router 切換動畫特性模擬前進後退動畫基於css3流暢動畫基於sessionStorage，頁面刷新不影響路由記錄路由懶載入，返回可記錄滾動條位置前進後退的判斷與路由路徑規則無關支持任意基於Vue的UI框架 demo 手機掃碼 "在 ...
簡訊提交驗證

// 簡訊提交驗證 //$(function(){ var daoshu = 60; var timer = null; //手機號 function checkPhone(){ var phoneNumber = $.trim($('#t_code').val()); var phone = do ...
JavaScript獲取日期方法

var time = new Date(); //當前時間 var year = time.getFullYear();//當前年份 var month = time.getMonth()+1; //當前月份 var Same_day = time.getDate(); //當前月份幾號 var t... ...
new Option()——實現時間聯動

1、基礎準備：先來瞭解下，如何運用js實現select動態添加option。 //1.動態創建select function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySele ...