Reka letak asas Bootstrap yang anda mesti pelajari setiap hari kemahiran javascript

Kali ini saya ingin belajar tentang tatabahasa, kebanyakannya juga terdapat dalam tag asas HTML, jadi ia agak mudah untuk memastikan kesempurnaan siri ini, saya juga akan menyemaknya dan merekodkannya. Kandungan utama adalah seperti berikut:

• 1.Tajuk
• 2. Isi halaman
• 3. Penekanan
• 4.Singkatan
• 5
6
• 7.

1. Tajuk

Semua tag tajuk dalam HTML, daripada

Selain itu, kelas dari .h1 hingga .h6 disediakan untuk memberikan teks atribut sebaris gaya tajuk.

<div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6>
 </div> 

Jom lihat kesannya terus

Tajuk juga boleh mengandungi teg

atau elemen .small

, yang boleh digunakan untuk menandakan sari kata.

 <div class="container"> 
  <h1 id="标题">标题</h1>
  <h1 id="h-Bootstrap-heading">h1. Bootstrap heading</h1><small>Secondary text</small>
  <h2 id="h-Bootstrap-heading">h2. Bootstrap heading</h2><small>Secondary text</small>
  <h3 id="h-Bootstrap-heading">h3. Bootstrap heading</h3><small>Secondary text</small>
  <h4 id="h-Bootstrap-heading">h4. Bootstrap heading</h4><small>Secondary text</small>
  <h5 id="h-Bootstrap-heading">h5. Bootstrap heading</h5><small>Secondary text</small>
  <h6 id="h-Bootstrap-heading">h6. Bootstrap heading</h6><small>Secondary text</small>
 </div> 

2. Isi halaman

Bootstrap menetapkan saiz fon global kepada 14px dan ketinggian garis kepada 1.428. Sifat ini diperuntukkan terus kepada dan semua elemen perenggan. Selain itu,

(perenggan) juga ditetapkan dengan jidar bawah bersamaan dengan 1/2 ketinggian baris (iaitu 10px).

 <h1 id="页面主体">页面主体</h1>
  <div style="border:1px solid ">
   <p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>

Ia jelas melalui paparan kesan.

Salinan badan utama Perenggan boleh diserlahkan dengan menambah .lead.

 <h1 id="Lead-Body-Copy">Lead Body Copy</h1>
  <div style="border:1px solid ">
   <p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
 
 Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
 </div>
 <h1></h1>

Anda boleh melihat kesan yang jelas dengan membandingkannya dengan badan utama halaman di atas.

3. Penekanan

Hanya gunakan tag HTML untuk penekanan dan berikan mereka sedikit gaya.

1. Teks kecil Untuk teks jenis sebaris atau blok yang tidak perlu ditekankan, gunakan teg untuk membalutnya dan teks di dalamnya akan ditetapkan kepada 85% daripada saiz fon bekas induk. Elemen bersarang dalam elemen tajuk ditetapkan kepada saiz fon yang berbeza. Anda juga boleh memberikan elemen sebaris .small sebagai ganti mana-mana teg

<small>This line of text is meant to be treated as fine print.</small>

2. Fokus
Tegaskan sekeping teks dengan meningkatkan berat fon.

<strong>rendered as bold text</strong>

3.Italik
Tekankan sekeping teks dalam huruf condong.

<em>rendered as italicized text</em>　　

4. Selaraskan kelas
Menggunakan kelas penjajaran teks, anda boleh menjajarkan semula teks dengan mudah dan mudah.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

Jelas sekali baris pertama dijajar ke kiri, baris kedua ditengah dan baris ketiga dijajar ke kanan.

5. Penekanan pada kelas
Kelas ini menggunakan warna untuk menyatakan penekanan. Juga boleh digunakan pada pautan supaya apabila tetikus melayang di atas pautan, warnanya akan menjadi lebih gelap, sama seperti gaya pautan lalai.

<h1 id="强调Class">强调Class</h1>
 <p class="text-muted">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-primary">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-warning">Maecenas sed diam eget risus varius blandit sit amet non magna..</p>
 <p class="text-danger">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 <h1></h1>

4. Gambar kecil

Kandungan lengkap akan dipaparkan apabila tetikus dilegar di atas singkatan dan singkatan Bootstrap melaksanakan gaya yang dipertingkatkan untuk elemen HTML Unsur singkatan mempunyai atribut tajuk dan muncul sebagai bingkai bertitik cahaya Apabila tetikus digerakkan ke atasnya, ia akan bertukar menjadi penunjuk dengan "tanda tanya". Jika anda ingin melihat kandungan yang lengkap, anda boleh mengarahkan tetikus ke atas singkatan, tetapi anda perlu memasukkan atribut tajuk. Singkatan asas
Jika anda ingin melihat kandungan yang lengkap, anda boleh mengarahkan tetikus ke atas singkatan, tetapi anda perlu memasukkan atribut tajuk.

<abbr title="attribute">attr</abbr>

Saya dapat melihat kesannya, tetapi saya tidak dapat mengambil tangkapan skrin.

Inisialisme Menambah .initialisme pada singkatan akan menetapkan saiz fonnya lebih kecil.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

Hanya muat naik kod dan lihat sendiri kesannya.

5. Alamat
Biarkan maklumat hubungan dibentangkan dalam format yang paling hampir dengan kegunaan harian. Tambahkan
pada hujung setiap baris untuk mengekalkan gaya yang diingini.

 

六、引用
在你的文档中引用其他来源的内容。
默认样式的引用
将任何HTML裹在

之中即可表现为引用。对于直接引用，我们建议用

标签。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

 

引用选项
对于标准样式的

，可以通过几个简单的变体就能改变风格和内容。
命名来源:添加标签来注明引用来源。来源名称可以放在标签里面。

<blockquote>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
</blockquote>

会多一个Source Title
另一种展示风格

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。   

 <blockquote class="pull-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
 </blockquote>

向右对齐移动了额，当然也有相应的pull-left。　　
七、列表
 无序列表 
顺序无关紧要的一列元素。

 <ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>

这个也很明显和Html的一样。
有序列表
顺序至关重要的一组元素。

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ol>

同理有序列表
无样式列表
移除了默认的list-style样式和左侧外边距的一组元素（只针对直接子元素）。这这是针对直接子元素，也就是说，你需要对所有嵌套的列表都添加此class才能具有同样的样式。

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Lorem ipsum dolor sit amet</li>
 </ul>

内联列表
通过设置display: inline-block;并添加少量的内补，将所有元素放置于同一列。

<ul class="list-inline">
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Lorem ipsum dolor sit amet</li>
  </ul>

效果当然就是在一行了。

以上就是Bootstrap基础排版的全部内容，希望大家好好阅读，再结合相关文章进行扩展性的学习。