Chúng ta sẽ tiếp tục với những "râu ria" của Bootstrap.
Thực ra có rất nhiều thứ liên quan đến việc tạo một website hoàn chỉnh, không gì bằng thực hành vì vậy chúng ta vẫn "trung thành" với phong cách...tào lao của chúng ta, vẫn cố gắng "đắp" mọi thứ vào một trang web. Chúng ta tiếp tục "nhồi nhét" mã sau vào mã HTML trước
<div class="mt-4 p-5 bg-primary text-white rounded text-center">
<h1>Đất Việt Lập Trình</h1>
<p>Ví dụ sử dung Jumbotron</p>
</div>
Giờ đây, mà HTML của trang web...tào lao của chúng ta đã "vĩ đại" như thế này
<!DOCTYPE html>
<html lang="en">
<head>
<title>Đất Việt Lập Trình</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Ví dụ Bootstrap 5 Grid System </h1>
<div class="row pb-2">
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title h1">Column 1 sử dụng H1</h5>
<p class="card-text">Nội dung nằm trong <mark>cột 1.</mark></p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title h3">Column 2 sử dụng H3</h5>
<p class="card-text mark">Nội dung nằm trong cột 2.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title h6">Column 3 sử dụng H6</h5>
<p class="card-text ">Nội dung nằm trong cột 3.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title display-1">Column 4 sử dụng display-1</h5>
<p class="card-text">Nội dung nằm trong cột 4.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 pb-2">
<div class="card bg-secondary">
<div class="card-body">
<h5 class="card-title display-2">Column 5 sử dụng display-2</h5>
<p class="card-text">Nội dung nằm trong cột 5.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-info">
<div class="card-body">
<h5 class="card-title display-3">Column 6 sử dụng display-3</h5>
<p class="card-text ">Nội dung nằm trong cột 6.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-12 col-sm-12 pb-2">
<div class="card bg-primary">
<div class="card-body">
<h5 class="card-title display-6">Column 7 sử dụng display-6</h5>
<p class="card-text ">Nội dung nằm trong cột 7.</p>
</div>
</div>
</div>
</div>
<p><del>Sử dụng thẻ del để xóa một dòng chữ.</del></p>
<p><u>Sử dụng thẻ u để gạch dưới dòng chữ.</u></p>
<p><small>Sử dụng thẻ small để làm cỡ chữ nhỏ hơn</small></p>
<p><strong>Sử dụng thẻ strong để tô đậm dòng chữ.</strong></p>
<p><em>Sử dụng thẻ em để in nghiêng dòng chữ.</em></p>
<p><abbr title="Tự học lập trình, học code online" class="initialism">Đât Việt Lập Trình</abbr></p>
<p class="text-center">Sử dụng text center</p>
<p class="text-end">Sử dụng text end</p>
<h2>Text Colors</h2>
<p class="text-muted">This text is Muted.</p>
<p class="text-primary">This text is Primary.</p>
<p class="text-success">This text indicates Success.</p>
<p class="text-info">This text represents some Info.</p>
<p class="text-warning">This text represents a Warning.</p>
<p class="text-danger">This text represents Danger.</p>
<p class="text-secondary">This text represents Secondary.</p>
<p class="text-dark">This text is Dark.</p>
<p class="text-body">Mặc định body color(Black).</p>
<p class="text-light">This text is light grey.</p>
<p class="text-white">This text is white.</p>
<h2>Background Colors</h2>
<div class="bg-primary p-3"></div>
<div class="bg-success p-3"></div>
<div class="bg-info p-3"></div>
<div class="bg-warning p-3"></div>
<div class="bg-danger p-3"></div>
<div class="bg-secondary p-3"></div>
<div class="bg-dark p-3"></div>
<div class="bg-light p-3"></div>
<h2>Một Table Đơn Giản</h2>
<table class="table">
<thead>
<tr>
<th>Tên</th>
<th>Địa Chỉ</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tran Van A</td>
<td>123 HV Da Nang</td>
<td>tranvana@email.com</td>
</tr>
<tr>
<td>Nguyen Van B</td>
<td>256 HV Da Nang</td>
<td>nguyenvanb@email.com</td>
</tr>
<tr>
<td>Le Thi C</td>
<td>789 HV Da Nang</td>
<td>lethic@email.com</td>
</tr>
</tbody>
</table>
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" class="img-fluid" alt="Đất Việt Lập Trình">
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" class="img-thumbnail" alt="Đất Việt Lập Trình" width="300" height="200"><br>
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" class="float-end" alt="Đất Việt Lập Trình" width="300" height="200"><br>
<img src="https://live.staticflickr.com/65535/53798056483_93a6438826_h.jpg" class="mx-auto d-block" style="width:30%">
<div class="mt-4 p-5 bg-primary text-white rounded text-center">
<h1>Đất Việt Lập Trình</h1>
<p>Ví dụ sử dung Jumbotron</p>
</div>
</div>
</body>
</html>
Vẫn tiếp tục với OnlineGDB, bấm Run để thực thi
Lưu ý: Jumbotron được giới thiệu trong Bootstrap 3 như một hộp đệm lớn để thu hút sự chú ý đặc biệt đến một số nội dung hoặc thông tin đặc biệt.
Jumbotron không còn được hỗ trợ trong Bootstrap 5. Tuy nhiên, chúng ta có thể sử dụng phần tử <div> và thêm các lớp trợ giúp đặc biệt cùng với lớp màu để đạt được hiệu ứng tương tự, giống như chúng ta đã thử làm trong ví dụ trên.
Chúng ta sẽ tiếp tục với một series "râu ria" khác nhau ngay trước thẻ </div> cuối cùng
<h2>Ví dụ Button</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
<input type="button" class="btn btn-success" value="Input Button">
<input type="submit" class="btn btn-success" value="Submit Button">
<input type="reset" class="btn btn-success" value="Reset Button">
<h2>Button Group</h2>
<div class="btn-group">
<button type="button" class="btn btn-success">Lập Trình C</button>
<button type="button" class="btn btn-success">Lập Trình Python</button>
<button type="button" class="btn btn-success">HTML và CSS</button>
</div>
<h2>Spinner Buttons</h2>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<h2>Pagination</h2>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Trang trước</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Trang sau</a></li>
</ul>
Bấm Run để thực thi
Chúng ta tạm dừng những phần "râu ria" để chuyển qua một phần tương đối cần thiết đó là Form.
Đây là một ví dụ Form đăng nhập quen thuộc với chúng ta, chúng ta sẽ "nhét" vào ngay trước thẻ </div> cuối cùng.
<h2>Đăng nhập</h2>
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Nhập email" name="email">
</div>
<div class="mb-3">
<label for="pwd">Mật khẩu:</label>
<input type="password" class="form-control" id="pwd" placeholder="Nhập mật khẩu" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Nhớ đăng nhập
</label>
</div>
<button type="submit" class="btn btn-primary">Đăng Nhập</button>
</form>
Bấm Run để thực thi
Chúng ta tiếp tục thêm một form cũng rất quen thuộc, đó là comment
<h2>Bình luận</h2>
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="comment">Bình luận:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
<button type="submit" class="btn btn-primary">Gửi bình luận</button>
</form>
Bấm Run để thực thi
Không có nhận xét nào:
Đăng nhận xét