Bab 2: Kemahiran gaya_javascript susun atur halaman Bootstrap

Bootstrap, daripada Twitter, pada masa ini merupakan rangka kerja bahagian hadapan yang paling popular. Bootstrap adalah berdasarkan HTML, CSS dan JAVASCRIPT Ia mudah dan fleksibel, menjadikan pembangunan web lebih pantas.

Mata pembelajaran:

1. Reka letak halaman

Dalam pelajaran ini, kita terutamanya mempelajari gaya reka letak dalam gaya CSS global Bootstrap, termasuk kandungan biasa seperti tajuk, isi halaman, penjajaran dan senarai.

1. Reka letak halaman

Bootstrap menyediakan beberapa gaya reka letak halaman yang biasa direka untuk digunakan oleh pembangun.

1. Isi halaman

Bootstrap menetapkan saiz fon global kepada 14px dan ketinggian garis kepada 1.428 (iaitu 20px); elemen perenggan ditetapkan bersamaan dengan 1/2 ketinggian baris (iaitu 10px); 333.

//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p> 

2. Tajuk

//从 h1 到 h6
<h1>Bootstrap 框架</h1>//36px
<h2>Bootstrap 框架</h2>//30px
<h3>Bootstrap 框架</h3>//24px
<h4>Bootstrap 框架</h4>//18px
<h5>Bootstrap 框架</h5>//14px
<h6>Bootstrap 框架</h6>//12px 

Kami belajar daripada melihat elemen dalam Firebug bahawa Bootstrap telah membina semula gaya CSS masing-masing untuk h1 ~ h6, dan juga menyokong kelas definisi elemen sebaris biasa=(.h1 ~ h6) untuk mencapai fungsi yang sama.

//内联元素使用标题字体
<span class="h1">Bootstrap</span> 

Nota: Melihat elemen melalui Firebug juga menunjukkan bahawa warna fon, gaya fon dan ketinggian garis semuanya tetap, sekali gus memastikan keseragaman, manakala unsur asli akan ditentukan berdasarkan sistem terbina dalam fon pilihan Warnanya paling hitam.

Di antara elemen h1 ~ h6, anda juga boleh membenamkan elemen kecil sebagai sari kata,

//在标题元素内插入 small 元素
<h1>Bootstrap 框架 <small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架 <small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架 <small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架 <small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架 <small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架 <small>Bootstrap 小标题</small></h6> 

Dilihat melalui Firebug, kami mendapati bahawa saiz elemen kecil di bawah h1 ~ h3 hanya menyumbang 65% daripada elemen induk Kemudian melalui pengiraan (lihat gaya yang dikira oleh Firebug), kecil di bawah h1 ~ h3 ialah 23.4. px, 19.5px, 15.6px; saiz elemen kecil di bawah h4 ~ h6 hanya menyumbang 75% daripada elemen induk, masing-masing: 13.5px, 10.5px, 9px. Gaya kecil di bawah h1 ~ h6 juga telah ditukar, warna menjadi kelabu muda: #777, ketinggian garis ialah 1, dan ketebalan ialah 400.

3. Elemen teks sebaris

//添加标记，<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p> 
//各种加线条的文本
<del>Bootstrap 框架</del>//删除的文本
<s>Bootstrap 框架</s>//无用的文本
<ins>Bootstrap 框架</ins>//插入的文本
<u>Bootstrap 框架</u>//效果同上，下划线文本 
//各种强调的文本
<small>Bootstrap 框架</small>//标准字号的 85%
<strong>Bootstrap 框架</strong>//加粗 700
<em>Bootstrap 框架</em>//倾斜 

4. Penjajaran

//设置文本对齐
<p class="text-left">Bootstrap 框架</p>//居左
<p class="text-center">Bootstrap 框架</p>//居中
<p class="text-right">Bootstrap 框架</p>//居右
<p class="text-justify">Bootstrap 框架</p>//两端对齐，支持度不佳<p class="text-nowrap">Bootstrap 框架</p>//不换行 

5. Huruf besar

//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写

6. Singkatan

//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>

7. Teks alamat

//设置地址，去掉了倾斜，设置了行高，底部 20px
<address>
　　<strong>Twitter, Inc.</strong><br>
　　795 Folsom Ave, Suite 600<br>
　　San Francisco, CA 94107<br>
　　<abbr title="Phone">P:</abbr> (123) 456-7890
</address>

8. Teks petikan

//默认样式引用，增加了做边线，设定了字体大小和内外边距
<blockquote>
　　Bootstrap 框架
</blockquote> 
//反向
<blockquote class="blockquote-reverse ">
　　Bootstrap 框架
</blockquote>

9. Reka letak senarai

//移出默认样式
<ul class="list-unstyled">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//设置成内联
<ul class="list-inline">
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
　　<li>Bootstrap 框架</li>
</ul> 
//水平排列描述列表
<dl class="dl-horizontal">
　　<dt>Bootstrap</dt>
　　<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl> 

10

//内联代码
<code><section></code> 
//用户输入
press <kbd>ctrl + ,</kbd> 
//代码块
<pre class="brush:php;toolbar:false"><p>Please input...</p>

Bootstrap juga menyenaraikan b7f90f73cad438258bf67e62f79b2113 untuk mewakili pembolehubah teg dan 162cd570ab1483e383d78dcb7f452f7c

Di atas adalah pengetahuan tentang gaya susun atur halaman Bootstrap yang diperkenalkan oleh editor saya harap ia akan membantu semua orang!