-------
Phần 39. Typography,
Table, Form, Glyphicons trong Bootstrap
Đây là clip số 13: Typography, trình bày văn bản trên trang
web.
Khi trình bày văn bản trên trang web, cần quan tâm tới: kích
thước font, khoảng cách giữa các dòng, khoảng cách giữa các đoạn, kích cỡ tiêu
đề. May mắn là Bootstrap đã tích hợp sẵn các nội dung này vào trong các CSS, vì
vậy chỉ cần gọi ra và sử dụng.
Các thẻ <h1>, <h2>, <p>, và nhiều thẻ khác
đã được Bootstrap định dạng lại theo chuẩn của Bootstrap. Ngoài ra Bootstrap cũng
tạo sẵn các class như: class=“text-left”, class=“text-center”, hoặc
class=“text-right” để căn chỉnh văn bản.
Để in đậm văn bản, dùng thẻ <strong> thì tốt hơn dùng
thẻ <b>, vì thẻ <strong> giúp SEO tốt hơn. SEO (Search Engine
Optimization): là quy trình tối ưu hóa website, để đạt thứ hạng cao trong kết
quả tìm kiếm.
Sử dụng class= “lead” để làm nổi bật đoạn đầu tiên của một
văn bản.
Một số class quy định về màu sắc của văn bản: text-muted,
text-primary, text-success, text-info, text-warning, text-danger.
Để bỏ các bullet của unordered list hoặc các số của ordered
list, sử dụng class=“list-unstyled”.
Để sắp xếp các mục con (item) của <ul> hoặc <ol>
nằm trên cùng một hàng ngang, sử dụng class=“list-inline”.
Có thể vào đây để tham khảo thêm về Typography: http://getbootstrap.com/css/#type
Đây là clip số 14: Table
Sử dụng class=“table” để định dạng bảng.
Sử dụng class=“table-bordered”: để thêm viền cho bảng.
Sử dụng class = “table-hover”: để tạo hiệu ứng cho một hàng,
khi rê chuột lên một hàng của bảng.
Sử dụng class=“table-striped”: để tô màu xen kẽ giữa các
hàng của bảng.
Sử dụng class=“table-condensed” để giảm độ rộng của các
hàng.
Bốn loại màu có thể sử dụng cho các hàng hay các ô của bảng là:
class=“active”, class=“success”, class=“warning”, class=“danger”.
Sử dụng class="table-responsive" để tùy chỉnh kích
thước của bảng theo kích thước của trình duyệt, giúp các phần tử bên ngoài bảng
không bị ảnh hưởng, không bị bể khung.
Cú pháp sử dụng class=“table-responsive”
<div class="container">
<div
class="table-responsive">
<table
class="table table-bordered table-hover table-striped
table-condensed">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
Đây là clip số 15: Form
Để ý: thuộc tính for trong tag <label> có tác dụng chỉ
ra label này sẽ thuộc về input nào (for=“id của input”, khi bấm vào label,
focus của dấu nháy chuột sẽ được đặt ở input tương ứng. Cách này giống với bao
cả input bằng thẻ label.
Bao label và input bằng class=“form-group” để nhóm hai thẻ
này thành một khối (block),
<div class="form-group">
<label
for="email">Email
<input
type="text" id="email"></label>
</div>
Sử dụng class form-control để thiết lập hiển thị, focus và
kích thước cho một input, select hoặc textarea,
<div class="form-group">
<label
for="email">Email</label>
<input
type="text" id="email" class="form-control">
</div>
Sử dụng class=“btn btn-primary” để định dạng cho một nút.
<button type="submit" class="btn
btn-primary">Submit</button>
Đoạn mã của một form đăng nhập cơ bản (vertical form) bằng
Bootstrap:
<div
class="container">
<h3
class="text-center">Login</h3>
<div
class="row">
<div
class="col-md-4 col-md-offset-4">
<form action="">
<div
class="form-group">
<label
for="email">Email</label>
<input
type="text" id="email" class="form-control">
</div>
<div
class="form-group">
<label
for="password">Password</label>
<input
type="password" id="password"
class="form-control">
</div>
<button
type="submit" class="btn
btn-primary">Submit</button>
</form>
</div>
</div>
</div>
Chuyển form đăng nhập vừa tạo ở trên sang dạng form-inline
(form nằm trên một hàng):
- Thêm class=“form-inline” vào thẻ form
- Thêm độ rộng cho form thành 8 column
- Không hiển thị label trên giao diện (class=“sr-only”),
thay vào đó là placeholder
<div class="container">
<div
class="row">
<div
class="col-md-8 col-md-offset-2">
<h3>Login</h3>
<form
action="" class="form-inline">
<div
class="form-group">
<label
for="email" class="sr-only">Email</label>
<input
type="text" id="email" class="form-control"
placeholder="Email">
</div>
<div
class="form-group">
<label
for="password" class="sr-only">Password</label>
<input
type="password" id="password"
class="form-control" placeholder="Password">
</div>
<button
type="submit" class="btn
btn-primary">Submit</button>
</form>
</div>
</div>
</div>
Tạo form đăng nhập kiểu horizontal form:
<div class="container">
<div
class="row">
<div
class="col-md-8 col-md-offset-2">
<h3>Login</h3>
<form
action="" class="form-horizontal">
<div
class="form-group">
<label
for="email" class="col-md-2
control-label">Email</label>
<div
class="col-md-10">
<input
type="text" id="email" class="form-control"
placeholder="Email">
</div>
</div>
<div
class="form-group">
<label
for="password" class="col-md-2
control-label">Password</label>
<div
class="col-md-10">
<input
type="password" id="password"
class="form-control" placeholder="Password">
</div>
</div>
<div class="form-group">
<div
class="col-md-10 col-md-offset-2">
<button
type="submit" class="btn
btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
Đây là clip số 16: Form – tối ưu form
Khi lập trình nhớ để ý việc tối ưu danh sách chọn (drop-down
list) theo đối tượng người dùng. Ví dụ, danh sách các quốc gia trên thế giới.
Có thể viết đoạn mã để: dựa vào địa chỉ IP của khách hàng, biết được khách hàng
đang ở nước nào, và hiển thị tên nước tương ứng trong ô select. Hoặc tùy thuộc
vào đối tượng người dùng là ai, để hiển thị danh sách các năm sinh (người dùng
sẽ chọn từ danh sách này) cho phù hợp.
Đây là clip số 17: Form – thứ tự phím tab trong form.
Thiết lập thứ tự focus
cho các ô nhập liệu khi người dùng bấm phím tab. Sử dụng thuộc tính tabindex
của HTML5, giá trị của tabindex càng nhỏ càng được ưu tiên.
Ví dụ,
<div class="col-md-10">
<input
type="text" id="email" class="form-control"
placeholder="Email" tabindex="1">
</div>
<div class="col-md-10">
<input
type="password" id="password"
class="form-control" placeholder="Password"
tabindex="2">
</div>
Thiết lập loại nút hoặc màu sắc của nút để thể hiện mức độ
quan trọng của các nút khác nhau. Ví dụ: trong trường hợp dưới đây Login sẽ
quan trọng hơn là Forgot your password?.
<div class="form-group">
<div
class="col-md-10 col-md-offset-2">
<button
class="btn btn-primary"
type="submit">Login</button>
<button
class="btn btn-link" type="submit">Forgot your password?</button>
</div>
</div>
Đây là clip số 18: Glyphicons
Component là các thành phần của CSS đã được viết sẵn trong
Bootstrap, được sử dụng cho các chức năng đặc biệt, giúp việc thiết kế web được
nhanh hơn.
Glyphicon là một loại component, gồm rất nhiều các biểu
tượng được thiết kế sẵn, ví dụ:
<label for="password" class="col-md-2
control-label"><span class="glyphicon
glyphicon-lock"></span>Password</label>
Vì glyphicon là một nhánh con của font, do vậy có thể định
dạng cho glyphicon như một loại font, ví dụ:
.glyphicon {
font-size: 64px;
color: red;
font-style: italic;
}
-----------
Cập nhật [11/10/2017][15/10/2016]
-----------