Bootstrap 輔助類


本章將討論 Bootstrap 中的一些可能會派上用場的輔助類別。

文字

以下不同的類別展示了不同的文字顏色。如果文字是個連結滑鼠移動到文字上會變暗：

##試試看 .text-primary嘗試##.text-success "text-success" 類別的文字樣式##.text-info#.text-warning## "text -warning" 類別的文字樣式"text-danger" 類別的文字樣式背景以下不同的類別展示了不同的背景顏色。 如果文字是個連結滑鼠移動到文字上會變暗：
類別描述實例
#.text-muted "text-muted" 類別的文字樣式
"text-primary" 類別的文字樣式
試試看
"text-info" 類別的文字樣式試試看
試試看.text-danger
嘗試

類別描述表格儲存格使用了"bg-primary" 類別表格儲存格使用了"bg-success" 類別表格儲存格使用了"bg-info" 類別表格儲存格使用了"bg-warning" 類別表格儲存格使用了"bg-danger" 類別
實例#.bg-primary
試試看.bg-success
試試看.bg-info
嘗試.bg-warning
試試看.bg-danger
試試看

其他

##強制元素顯示嘗試一下.hidden#強制元素隱藏嘗試##.sr-only #.sr-only-focusable.text-hide#.close.caret
類別描述#實例
.pull-left 元素浮動到左邊試試看
.pull-right元素浮動到右邊試試
.center-block設定元素為display:block 並居中顯示試試看
.clearfix清除浮動
#.show
除了螢幕閱讀器外，其他裝置上隱藏元素試試看
與.sr-only 類別結合使用，在元素取得焦點時顯示(如：鍵盤操作的使用者)嘗試
將頁面元素所包含的文字內容替換為背景圖嘗試
顯示關閉按鈕嘗試一下
#顯示下拉式功能#嘗試
###############

更多實例

關閉圖示

使用通用的關閉圖示來關閉模態框和警告框。使用 class close 得到關閉圖示。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 關閉實例 - 關閉圖示</title<>Bootstrap 停用實例 - 關閉圖示</title<<##gt; ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

#<p>關閉圖示實例
   <button type="button" class="close" aria-hidden="true">
      ×
   <#button>##</p&##</p&
< </body>
</html>


#實例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 关闭图标</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>关闭图标实例
   <button type="button" class="close" aria-hidden="true">
      ×
   </button>
</p>

</body>
</html>

執行實例»

#點擊"運行實例" 按鈕查看線上實例

插入符號

#<!DOCTYPE html>

<html>
#<head>
   <title>Bootstrap 實例 - 插入符</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/cscss /bootstrap.min.css">
   <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<p>插入符實例
   <span class="caret"></span>
</p>

#</body>
</html>


#實例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 插入符</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>插入符实例
   <span class="caret"></span>
</p>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

快速浮動

您可以分別使用 class pull-left 或 pull-right 來把元素向左或向右浮動。下面的實例示範了這一點。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap  ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

#<div class="pull-left ">
   向左快速浮動
</div>
<div class="pull-right">
   向右快速浮動
</div>


</body>
</html>
實例

##
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 快速浮动</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="pull-left">
   向左快速浮动
</div>
<div class="pull-right">
   向右快速浮动
</div>


</body>
</html>

運行實例»
點擊"執行實例" 按鈕查看線上實例

如需對齊導覽列中的元件，請使用
.navbar-left

或.navbar-right 代替。請查看 Bootstrap 導覽列。 內容居中

使用 class

center-block

來居中元素。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 居中內容區塊</title>Bootstrap 實例 - 居中內容區塊</title>
title>## <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http: //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/ bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" >
   <div class="center-block" style="width:200px;background-color:#ccc;">
      這是 center-block; ##</div>

</body>
</html>



實例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 居中内容块</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
   <div class="center-block" style="width:200px;background-color:#ccc;">
      这是 center-block 实例
   </div>
</div>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

#清除浮動

如需清除元素的浮動，請使用.clearfix class。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap  - 清除浮動</title> ;link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http:/ /apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/bootstrap /3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="clearfix"  style ="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
   <div class="pull-left"# 快速浮動
   </div>
   <div class="pull-right" style="background: #DA81F5;">
     ##</div>

</body>
</html>



實例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 清除浮动</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
   <div class="pull-left" style="background:#58D3F7;">
      向左快速浮动
   </div>
   <div class="pull-right" style="background: #DA81F5;">
      向右快速浮动
   </div>
</div>

</body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例

顯示和隱藏內容

您可以透過使用 class .show 和 .hidden 來強行設定元素顯示或隱藏（包括螢幕閱讀器）。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 顯示和隱藏內容</title>Bootstrap 實例 - 顯示和隱藏內容</title>
   <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="httpmin.css">
   <script src="httpmin ://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs /bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row " style="padding: 91px 100px 19px 50px;">
   <div class="show" style="left-margin:10px;width:300pxxbackground-color:#ccbackground; #     收到的實例
   </div>
</div>

</body>
</html>


實例
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 显示和隐藏内容</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style="padding: 91px 100px 19px 50px;">
   <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
      这是 show class 的实例
   </div>
   <div class="hidden" style="width:200px;background-color:#ccc;">
      这是 hide class 的实例
   </div>
</div>

</body>
</html>

運行實例»

點擊"運行實例"按鈕查看線上實例

螢幕閱讀器

您可以透過使用 class .sr-only 來把元素對所有裝置隱藏，除了螢幕閱讀器。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實例 - 屏幕閱讀器<#title>Bootstrap 實例 - 屏幕閱讀器<#/title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
   <script src="http: //apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="http://apps.bdimg.com/libs/ bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style="padding: 91px 100px 19px 50px;">
   <form class="form-inline" role="form">
   <divdivdivclass="form-groupdiv #      <label class="sr-only" for="email">Email 地址</label>
      <input ;
   </div>
   <div class="form-group">
      <label class="sr-only" for="pass">密碼<lt;label class="sr-only" for="pass">密碼</label<
      <input type="password" class="form-control" placeholder="Password">
   </div>
   </form&div</div>
 
##</body>
</html>

#實例

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 屏幕阅读器</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row" style="padding: 91px 100px 19px 50px;">
   <form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="email">Email 地址</label>
      <input type="email" class="form-control" placeholder="Enter email">
   </div>
   <div class="form-group">
      <label class="sr-only" for="pass">密码</label>
      <input type="password" class="form-control" placeholder="Password">
   </div>
   </form>
</div>

</body>
</html>

##執行實例»

點擊"運行實例" 按鈕查看線上實例
←
→

PHP中文網

首頁首頁課程課程文章文章問答問答詞典詞典手册手册下載下載搜尋搜尋APP下載 APP下載