Tipografi Bootstrap


Bootstrap menggunakan Helvetica Neue, Helvetica, Arial dan sans-serif sebagai tindanan fon lalainya.

Menggunakan ciri tipografi Bootstrap, anda boleh membuat tajuk, perenggan, senarai dan elemen sebaris lain.

Tajuk

Bootstrap mentakrifkan gaya semua tajuk HTML (h1 hingga h6). Sila lihat contoh berikut:

Instance

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<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>

<h1>我是标题1 h1</h1>
<h2>我是标题2 h2</h2>
<h3>我是标题3 h3</h3>
<h4>我是标题4 h4</h4>
<h5>我是标题5 h5</h5>
<h6>我是标题6 h6</h6>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

sari kata sebaris

Jika anda perlu menambah sari kata sebaris pada mana-mana tajuk, cuma tambahkan <kecil> 🎜> kelas, supaya anda boleh mendapatkan saiz fon yang lebih kecil dan teks yang lebih ringan, seperti yang ditunjukkan dalam contoh berikut:

<!DOCTYPE html>
<html> ;
< head>
<title>Contoh Bootstrap - Sari Kata Sebaris</title>
<link href="/bootstrap/css/bootstrap.min.css" rel=" stylesheet">
< skrip src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"> ;</script>
</kepala>
<badan>

<h1>saya tajuk 1 h1 <kecil>saya sari kata 1 h1</h1></h1> ;h2>Saya tajuk 2 h2. <kecil>saya sari kata 2 h2</small></h2>
<h3>Saya tajuk 3 h3< ;kecil>saya sari kata. /small></h3>
<h4>Saya sari kata 4 h4 <kecil>saya sari kata 4 h4</small></h4>
<h5> h5. <kecil>Saya <kecil>/small></h5>
<h6>Saya <kecil>Saya sari kata 6 h6</small> ;

</body>
</html>


Instance
rreee

Lari Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian


But salinan utama

Untuk menambah teks penekanan pada perenggan, anda boleh menambah class="lead", yang akan menghasilkan teks yang lebih besar dan tebal dengan ketinggian baris yang lebih tinggi, seperti yang ditunjukkan dalam contoh berikut: 

<!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>

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> 
<h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
<h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
<h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
<h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
<h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>

</body>
</html>

Instance

<!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>
<hr>
<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

< kecil> (menetapkan teks kepada 85% daripada saiz teks induk), <strong> (menetapkan teks menjadi lebih tebal), <em>
Bootstrap menyediakan beberapa kelas untuk menekankan teks, seperti yang ditunjukkan dalam contoh berikut: 
<!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>

<h2>引导主体副本</h2>
<p class="lead">这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。这是一个演示引导主体副本用法的实例。</p>

</body>
</html>

Instance

<!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>

<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>

Run Contoh »

Klik butang "Jalankan Contoh" untuk melihat contoh dalam talian

Singkatan
HTML
elemen menyediakan markup untuk singkatan, Seperti WWW atau HTTP. Bootstrap mentakrifkan gaya elemen <abbr> sebagai sempadan putus-putus yang muncul di bahagian bawah teks, dengan teks penuh muncul apabila tetikus dituding di atasnya (selagi anda menambah teks untuk tajuk <abbr> atribut). Untuk mendapatkan saiz fon yang lebih kecil untuk teks, tambahkan .initialism pada <abbr>. 
<!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>

<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在 <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>

Instance
<!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>

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

</body>
</html>

Run Instance»Klik butang "Run Instance" untuk melihat dalam talian contoh

Alamat
Menggunakan teg <alamat>, anda boleh memaparkan maklumat hubungan pada halaman web. Memandangkan <address> lalai untuk memaparkan:block;, anda perlu menggunakan teg
untuk menambah pemisah baris pada teks alamat yang dilampirkan. 
<!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>

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

</body>
</html>

Instance

<!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>

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

</body>
</html>

Run Instance»


Klik butang "Run Instance" untuk melihat instance dalam talian

Blockquote

Anda boleh menggunakan <blockquote> lalai di sebelah mana-mana teks HTML. Pilihan lain termasuk menambahkan teg <kecil> untuk mengenal pasti sumber petikan dan menggunakan kelas .tarik-kanan untuk menyelaraskan petikan. Contoh berikut menunjukkan ciri ini:

<!DOCTYPE html>
<html>
<head>
<title>Contoh Bootstrap - /title> ;
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<skrip src="/scripts/jquery.min.js"> /script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<badan>

<blockquote><p>
Ini ialah contoh petikan lalai. Ini ialah contoh rujukan lalai. Ini ialah contoh rujukan lalai. Ini ialah contoh rujukan lalai. Ini ialah contoh rujukan lalai. Ini ialah contoh rujukan lalai. Ini ialah contoh rujukan lalai. Ini ialah contoh rujukan lalai. </p></blockquote>
<blockquote>Ini ialah petikan dengan tajuk sumber. <kecil>Seseorang yang terkenal dalam <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">This ialah rujukan dijajarkan ke kanan. <kecil>Seseorang yang terkenal dalam <cite title="Tajuk Sumber">Tajuk Sumber</cite></small></blockquote>

</body>
/html>

Instance

<!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>

<address>
  <strong>Some Company, Inc.</strong><br>
  007 street<br>
  Some City, State XXXXX<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">mailto@somedomain.com</a>
</address>

</body>
</html>

Run instance»

Klik "Run Butang " Contoh" untuk melihat contoh dalam talian

Senarai

Bootstrap menyokong senarai tersusun, senarai tidak tersusun dan senarai yang ditentukan.

  • Senarai Tertib: Senarai tertib ialah senarai yang bermula dengan nombor atau aksara tertib lain.

  • Senarai tidak tersusun: Senarai tidak tertib merujuk kepada senarai tanpa susunan tertentu dan merupakan senarai yang bermula dengan penekanan tradisional. Jika anda tidak mahu tanda penekanan ini dipaparkan, anda boleh menggunakan kelas .list-unstyled untuk mengalih keluar gaya. Anda juga boleh meletakkan semua item senarai pada baris yang sama dengan menggunakan kelas .list-inline.

  • Tentukan Senarai: Dalam senarai jenis ini, setiap item senarai boleh mengandungi elemen <dt> <dt> bermaksud untuk mentakrifkan istilah , seperti kamus, yang (atau frasa) ditakrifkan. Seterusnya, <dd> ialah perihalan <dt>. Anda boleh menggunakan kelas dl-horizontal untuk memaparkan atribut dan penerangan sebelah menyebelah dalam baris <dl>

Contoh berikut menunjukkan jenis senarai ini: 

<!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>

<blockquote><p>
这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。</p></blockquote>
<blockquote>这是一个带有源标题的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>

</body>
</html>

Contoh

<!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>

<h4>有序列表</h4>
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>
<h4>无序列表</h4>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>未定义样式列表</h4>
<ul class="list-unstyled">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>内联列表</h4>
<ul class="list-inline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
<h4>定义列表</h4>
<dl>
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>
<h4>水平的定义列表</h4>
<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

</body>
</html>

Jalankan Instance »

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian


Lebih banyak kelas tipografi

Jadual berikut menyediakan contoh lebih banyak kelas tipografi Bootstrap:

类描述实例
.lead使段落突出显示尝试一下
.small设定小文本 (设置为父文本的 85% 大小)尝试一下
.text-left设定文本左对齐尝试一下
.text-center设定文本居中对齐尝试一下
.text-right设定文本右对齐尝试一下
.text-justify设定文本对齐,段落中超出屏幕部分文字自动换行尝试一下
.text-nowrap段落中超出屏幕部分不换行尝试一下
.text-lowercase设定文本小写尝试一下
.text-uppercase设定文本大写尝试一下
.text-capitalize设定单词首字母大写尝试一下
.initialism显示在 <abbr> 元素中的文本以小号字体展示尝试一下
.blockquote-reverse设定引用右对齐尝试一下
.list-unstyled移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项    (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)尝试一下
.list-inline将所有列表项放置同一行尝试一下
.dl-horizontal该类设置了浮动和偏移，应用于 <dl> 元素和 <dt> 元素中，具体实现可以查看实例尝试一下
.pre-scrollable使 <pre> 元素可滚动 scrollable尝试一下


←
→