BootStrap學習筆記之排版

移動界面縮放自適應

<meta name="viewport" content="width=device-width, initial-scale=1.0">

禁止縮放自適應移動界面

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

設置body格式

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

在這裏插入圖片描述
超鏈接樣式

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
所以,當鼠標懸停在鏈接上,或者點擊過的鏈接,顏色會被設置爲 #2a6496。同時,會呈現一條下劃線。

除此之外,點擊過的鏈接,會呈現一個顏色碼爲 #333 的細的虛線輪廓。另一條規則是設置輪廓爲 5 像素寬,且對於基於 webkit 瀏覽器有一個 -webkit-focus-ring-color 的瀏覽器擴展。輪廓偏移設置爲 -2 像素。

以上所有這些樣式都可以在 scaffolding.less 中找到。

``





```css
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 實例 - 強調</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<small>本行內容是在標籤內</small><br>
<strong>本行內容是在標籤內</strong><br>
<em>本行內容是在標籤內,並呈現爲斜體</em><br>
<p class="text-left">向左對齊文本</p>
<p class="text-center">居中對齊文本</p>
<p class="text-right">向右對齊文本</p>
<p class="text-muted">本行內容是減弱的</p>
<p class="text-primary">本行內容帶有一個 primary class</p>
<p class="text-success">本行內容帶有一個 success class</p>
<p class="text-info">本行內容帶有一個 info class</p>
<p class="text-warning">本行內容帶有一個 warning class</p>
<p class="text-danger">本行內容帶有一個 danger class</p>

</body>
</html>

在這裏插入圖片描述
縮寫樣式,可以與查看更多相聯繫

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

在這裏插入圖片描述

發佈了82 篇原創文章 · 獲贊 194 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章