天天看點

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;
}      
BootStrap學習筆記之排版

超連結樣式

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>      
BootStrap學習筆記之排版
<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>