Bootstrap - Mặc định thiết đặt
|
00:36 |
No Comments |
Trong Bootstap mặc định font-size là 14px, với line-height là 1.428
Đều đó được áp dụng cho thẻ <body> và tất cả các đoạn văn.
Dưới đây là những điểm khác biệt của Bootstrap.
</h1> Đều đó được áp dụng cho thẻ <body> và tất cả các đoạn văn.
Dưới đây là những điểm khác biệt của Bootstrap.
<h1> - <h6>
Theo mặc định, Bootstrap dùng để tạo kiểu cho tiêu đề html (h1 đến h6) như sau :Ví dụ :
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
<h1>h1 Bootstrap heading (36px)</h1>
<h2>h2 Bootstrap heading (30px)</h2>
<h3>h3 Bootstrap heading (24px)</h3>
<h4>h4 Bootstrap heading (18px)</h4>
<h5>h5 Bootstrap heading (14px)</h5>
<h6>h6 Bootstrap heading (12px)</h6>
<small>
Trong Bootstrap thẻ <small> được dùng để tạo ra hiệu ứng chữ nhỏ :Ví dụ :
<h1>h1 Bootstrap heading <small>Effect <small></small>
<h1>h1 Bootstrap heading <small>Effect <small></small>
<h2>h2 Bootstrap heading <small>Effect <small></small></h2>
<h3>h3 Bootstrap heading <small>Effect <small></small></h3>
<h4>h4 Bootstrap heading <small>Effect <small></small></h4>
<h5>h5 Bootstrap heading <small>Effect <small></small></h5>
<h6>h6 Bootstrap heading <small>Effect <small></small></h6>
<mark>
Thẻ <mark> trong Bootstrap dùng để tô nền cho phần chữ được áp dụng như sau :Ví dụ :
<p>Cách <mark>sử dụng</mark> thẻ <mark><mark></mark></p>
<p>Cách <mark>sử dụng</mark> thẻ <mark><mark></mark></p>
<abbr>
Thẻ <abbr> trong Bootstrap dùng để tạo chú thích cho một từ nào đó :Ví dụ :
<p>Cách <abbr title="hướng dẫn sử dụng thẻ <abbr>">sử dụng</abbr> thẻ <abbr><abbr></abbr></p>
<p>Cách <abbr title="hướng dẫn sử dụng thẻ <abbr>">sử dụng</abbr> thẻ <abbr><abbr></abbr></p>
<blockquote>
Thẻ <blockquote> trong Bootstrap dùng để tạo trích dẫn như sau :Ví dụ :
<blockquote>
<p>Hướng dẫn sử dụng thẻ <blockquote></p>
<footer>từ hailong's blog</footer>
</blockquote>
Để 'hailong's blog' hiển thị bên phải bạn thêm class pull-right :<blockquote>
<p>Hướng dẫn sử dụng thẻ <blockquote></p>
<footer>từ hailong's blog</footer>
</blockquote>
Ví dụ :
<blockquote class="pull-right">
<p>Hướng dẫn sử dụng thẻ <blockquote></p>
<footer>từ hailong's blog</footer>
</blockquote>
<blockquote class="pull-right">
<p>Hướng dẫn sử dụng thẻ <blockquote></p>
<footer>từ hailong's blog</footer>
</blockquote>
<dl>
Thẻ <dl> trong Bootstrap dùng để tạo danh sách :Ví dụ :
<dl>
<dt>Cà phê</dt>
<dd>- cà phê đá</dd>
<dd>- cà phê sữa</dd>
<dt>Trà</dt>
<dd>- Lipton</dd>
<dd>- Atiso</dd>
</dl>
<dl>
<dt>Cà phê</dt>
<dd>- cà phê đá</dd>
<dd>- cà phê sữa</dd>
<dt>Trà</dt>
<dd>- Lipton</dd>
<dd>- Atiso</dd>
</dl>
<code>
Thẻ <code> trong Bootstrap dùng để làm nổi bậc các thẻ html :Ví dụ :
<p>Đây là các thẻ trong html: <code>span</code>, <code>section</code>, and <code>div</code></p>
<p>Đây là các thẻ trong html: <code>span</code>, <code>section</code>, and <code>div</code></p>
Màu sắc của chữ và nền
Bootstrap cung cấp một số class màu sắc cho văn bản :.text-muted.text-primary.text-success.text-info.text-warning.text-danger
Ví dụ :
<p class="text-muted">đây là.text-muted</p>
<p class="text-primary">đây là .text-primary</p>
<p class="text-success">đây là .text-success</p>
<p class="text-info">đây là .text-info</p>
<p class="text-warning">đây là .text-warning</p>
<p class="text-danger">đây là .text-danger</p>
<p class="text-muted">đây là.text-muted</p>
<p class="text-primary">đây là .text-primary</p>
<p class="text-success">đây là .text-success</p>
<p class="text-info">đây là .text-info</p>
<p class="text-warning">đây là .text-warning</p>
<p class="text-danger">đây là .text-danger</p>
Bootstrap cung cấp một số class màu sắc cho nền văn bản :
.bg-primary.bg-success.bg-info.bg-warning.bg-danger
Ví dụ :
<p class="bg-primary">đây là .bg-primary</p>
<p class="bg-success">đây là .bg-success</p>
<p class="bg-info">đây là .bg-info</p>
<p class="bg-warning">đây là .bg-warning</p>
<p class="bg-danger">đây là .bg-danger</p>
<p class="bg-primary">đây là .bg-primary</p>
<p class="bg-success">đây là .bg-success</p>
<p class="bg-info">đây là .bg-info</p>
<p class="bg-warning">đây là .bg-warning</p>
<p class="bg-danger">đây là .bg-danger</p>
0 nhận xét:
Đăng nhận xét