Buku pengenalan Bootstrap (1) Typesetting_javascript kemahiran

Bacaan yang disyorkan: Buku pengenalan Bootstrap: (Sifar) Pengenalan kepada Bootstrap

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

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

1. Tajuk

Cara untuk menggunakan tajuk dalam Bootstrap adalah sama seperti dalam HTML biasa: susun elemen tajuk dari besar ke kecil daripada 4a249f0d628e2318394fd9b75b4636b1 kepada 4e9ee319e0fa4abc21ff286eeb145ecc, tetapi gaya lalai ditetapkan semula dalam Bootstrap, yang boleh ditemui dalam kod sumber Kami melihat persamaan berikut:

Warna fon dan gaya fon diwarisi daripada elemen induk, berat fon ialah 500 dan ketinggian garisan semuanya ditetapkan kepada 1.1 (iaitu, 1.1 kali saiz fon)

{ font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}

Perbezaan antara tajuk dengan saiz yang berbeza adalah seperti berikut:

Dalam Bootstrap, saiz fon untuk tahap tajuk yang berbeza ditetapkan kepada: h1=36px, h2=30px, h3=24px, h4=18px, h5=14px dan h6=12px.

Tetapkan semula nilai margin-atas dan margin-bawah Nilai set semula h1~h3 adalah semua nilai set semula h4~h6 semuanya 10px.

Selain itu, untuk menggunakan gaya yang sama untuk elemen dan tajuk bukan tajuk dalam Bootstrap, enam nama kelas .h1~.h6 juga ditakrifkan khas. Seperti yang ditunjukkan di bawah:

Dalam Bootstrap, kod berikut memaparkan kesan yang sama.

<!--Bootstrap中的标题-->
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>
<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

Kerana dalam aplikasi sebenar, kita mungkin sering menghadapi situasi di mana selain tajuk utama, terdapat sari kata serta-merta selepas itu. Bootstrap secara humanistik menyediakan kesan sedemikian untuk kita. Cara penggunaannya juga sangat mudah, seperti berikut:

<h1>Bootstrap标题一<small>我是副标题</small></h1>

Sudah tentu tetapan ini akan berfungsi dari 4a249f0d628e2318394fd9b75b4636b1 Sari kata f10b88374daa39ad6be9e37e1189a28b mempunyai gaya tersendiri:

Ketinggian garisan semuanya ditetapkan kepada 1, berat fon ditukar kepada biasa (tidak tebal) dan warna ditetapkan kepada kelabu ( #999 ).
Saiz teks teg f10b88374daa39ad6be9e37e1189a28b dalam h1~h3 ditetapkan kepada 65% daripada saiz fon semasa manakala saiz fon dalam h4~h6 ditetapkan kepada 75% daripada saiz fon semasa;

2. Teks utama

Gaya teks global dalam Bootstrap adalah seperti berikut:

Saiz fon ialah 14px

Ketinggian garisan ialah 1.42867143 (lebih kurang sama dengan 20px)
Warna fon ialah #333
Terdapat margin bawah 10 piksel di luar margin tag p-bottom:10px;
Sudah tentu, anda boleh menetapkan sendiri gaya tetapan semula. ^_^

3. Penekanan

Gaya fon berkaitan

<p class="lead">lead</p><!-- 字体变大，行高变大，下外边距变大 -->
<i>i</i><!--无特殊意义， 斜体 -->
<small>small</small><!-- 小号字体-->
<strong>strong</strong><!-- 语气强烈的强调，粗体 -->
<em>em</em><!-- 强调，斜体 -->

Penekanan pada kelas yang berkaitan

Serangkaian kelas sedemikian ditakrifkan dalam Bootstrap, yang digunakan dalam senario yang berbeza Selain teks, terdapat juga bg (warna latar belakang) dan sebagainya. Penggunaannya serupa, kecuali teks sebelumnya telah diubah! jadi. Ingat 6 perkataan ini

<p class="text-muted">提示，使用浅灰色（#999）</p>
<p class="text-primary">主要，使用蓝色（#428bca）</p>
<p class="text-success">成功，使用浅绿色(#3c763d)</p>
<p class="text-info">通知信息，使用浅蓝色（#31708f）</p>
<p class="text-warning">警告，使用黄色（#8a6d3b）</p>
<p class="text-danger">危险，使用褐色（#a94442）</p>

4. Gaya penjajaran teks

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">我两端对齐</p>

Dalam Bootstrap, untuk memudahkan operasi dan memudahkan penggunaan, empat kelas di atas digunakan untuk sepadan dengan penjajaran teks yang sering kami gunakan dalam CSS untuk menetapkan gaya penjajaran teks.

5 Tetapan senarai dalam Bootstrap pada asasnya sama dengan HTML asli Perkara yang perlu diperhatikan ialah: Mempunyai margin bawah 10px antara senarai

Dalam senarai bersarang, tiada margin bawah

Sudah tentu Bootstrap bukan sahaja akan membuat sedikit pengubahsuaian, ia mentakrifkan beberapa kelas tentang senarai untuk kita gunakan.

Pergi ke senarai .list-unstyled

Daripada kod sumber, kita dapat melihat maklumat ini Selain mengalih keluar nombor item, ia juga mengosongkan margin kiri lalai.

.list-unstyled {
padding-left: 0;
list-style: none;
}

Dalam sekeping kod sebegitu, ketiga-tiga item senarai akan disusun dengan kemas bersama, dan tiada satu pun daripadanya mempunyai peluru

<ol>
<li class="list-unstyled">
项目列表
<ul class="list-unstyled">
<li>带有项目编号</li>
<li>带有项目编号</li>
</ul>
</li>
</ol>

Senarai sebaris .senarai-sebaris

Selain mengalih keluar senarai titik, Bootstrap juga boleh melaksanakan senarai sebaris dengan menambah nama kelas ".list-inline". penomboran), mengekalkan Paparan secara mendatar. Ia juga boleh dikatakan bahawa senarai sebaris dilahirkan untuk membuat navigasi mendatar.

Senarai definisi mendatar .dl-mendatar

Kod sedia ada adalah seperti berikut:

在浏览器全屏显示中可以看到效果如下：

 

我们来把屏幕大小进行改变，在遇到一个临界值时（小屏），水平定义列表将回复到原始的状态，如下改变：

 

这是为什么呢？我们去看看源码吧！

原来在这里添加了一个媒体查询，只有 屏幕大于768px 的时候，添加类名 .dl-horizontal 才具有水平定义列表效果。其实现主要方式：

将dt设置了一个左浮动，并且设置了一个宽度为160px
将dd设置一个margin-left的值为180px，达到水平的效果
当标题宽度超过160px时，将会显示三个省略号
现在再看看上面的效果是不是和这里的描述都是一样的呢？答案当然是肯定的 ^ ^

6. 代码

在Bootstrap主要提供了三种代码风格：

使用 ffbe95d20f3893062224282accb13e8f1cd55414ff5abdfea5dd958e7e547fdd 来显示单行内联代码——针对于 单个单词或单个句子 的代码
使用 e03b848252eb9375d56be284e690e873bc5574f69a0cba105bc93bd3dc13c4ec 来显示多行块代码——针对于 多行代码 （也就是成块的代码）
使用 5e4e803d53d659f332070b5d4aa430dbfef2f75ac4ec8153f0fa6efea5a0515d 来显示用户输入代码——表示 用户要通过键盘输入的内容

直接来看效果吧!

 

代码如下：（需要注意的是，**不管使用哪种代码风格，在代码中碰到小于号（ 11ef5bafbf9d727d95fdee6ca9b96700 ）都需要使用转义字符来替代）

code风格：

<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre class="brush:php;toolbar:false"></code>和<code><kbd></code></div>

pre风格：

<div>
<pre class="brush:php;toolbar:false">
<ul>
<li>...</li>
</ul>