CSS

Ở bài học này chúng ta sẽ tìm hiểu về các lớp CSS và cấu trúc của phần tử HTML trong khung làm việc Twitter Bootstrap.

Thẻ Đề Mục

Các thẻ đề mục của trang được đánh dấu sử dụng các thẻ <h1> tới <h6>. Ngoài ra chúng ta cũng có thể sử dụng các tên lớp từ .h1 cho tới .h6 tương ứng.

Bootstrap heading h1 tag

Bootstrap heading h1 tag

<h1>Bootstrap heading <small>h1 tag</small></h1>
<div class="h1">Bootstrap heading <small>h1 tag</small></div>

Chạy

Canh Ngang

Để canh ngang chúng ta có thể sử dụng các lớp CSS tương ứng như sau:

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

No wrap text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Chạy

Text Transform

Sử dụng text-lowercase, text-uppercase và text-capitalize để chuyển đổi ký tự thành in thường, in hoa và in hoa chữ cái đầu.

Lowercased text.

Uppercased text.

Capitalized text.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Chạy

Blockquote

Sử dụng thẻ <blockqute> để tạo một trích dẫn và các thẻ <footer> và <cite> để trích dẫn nguồn.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

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

Chạy

Bảng

Khi tạo bảng chúng ta cần thêm tên lớp .table vào thẻ ở <table class="table">. Ngoài ra bạn có thể thêm một chú thích tuỳ ý với thẻ <caption>.

Chú thích (tuỳ chọn)

First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

<table class="table">
    <caption>Chú thích (tuỳ chọn)</caption>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th> <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        ...
    </tbody>
</table>

Chạy

Nguồn: CodeHub.vn