Người Viết : ViKiMi Editor

Thiết website đòi hỏi bức thiết một trình độ chuyên môn nhất định. Buộc lòng bạn phải có một kiến thức lập trình cơ bản. Hiện nay, nhiều lập trình viên cho rằng việc nắm chắc các hỗ trợ Framework là có thể thực hiện lập trình. Nhưng sự thật bạn phải có những cách xử lý cơ bản nhất để có thể thay đổi kịp theo các môi trường sinh thái website.
Trong việc đề cập tới Bootstrap rất cần thiết những yếu tố cơ bản nhất. Nhưng để hoàn thiện việc lập trình website thì bạn nên nắm chắc CSS và Javascript. Việc bồi dưỡng kiến thức do quá trình học hỏi nên cần nhiều thời gian.
Với Bootstrap chúng ta cần nắm những thứ thiết yếu, thực hiện thiết kế tốt nhất. Trong bài viết này, sẽ đề cập đến yếu tố mới hơn, Chúng ta sẽ tìm đến một đích mới là các xử lý không thể thiết với Bootstrap. Những tổng hợp xử lý ngắn gọn của Bootstrap sẽ được hiểu rõ nhất.
A. Bootstrap Jumbotron và Tiêu đề trang
Khi bạn gặp một vài tương tác đòi hỏi việc hiển thị phải lớn đem lại chú ý lớn cho ngưới sử dụng, thì ưu tiên xử lý hiển thị Bootstrap Jumbotron và tiêu đề trang sẽ cần thiết hơn tất cả.
+ Chúng ta sẽ thấy việc tạo một Jumbotron cần thiết đến mức nào. Vì Jumbotron tạo ra một hộp hiển thị thông tin lớn và gây được sự chú ý chung. Có thể nói Jumbotron chính là cách thức đơn giản để hiển thị thông tin đặc biệt.
Một Jumbotron hiển thị dưới dạng thông tin một hộp lớn có các góc bo tròn. Các kiểu chữ trong Jumbotron cũng được hiển thị lớn.
+ Để tạo một Jumbotron thì bạn chỉ cần tạo một thẻ Div và Div này sử dụng class .jumbotron
CREATE MỘT JUMBOTRON BÊN TRONG MỘT CONTAINER
Để tạo một Jumbotron trong một Containner bạn chỉ cần tạo một Jumbotron bên trong một khung chứa Div và thẻ Div này có class .container
Ex :
<Div class=’container’>
<Div class=’jumbotron’>
……
</Div>
</Div>
<div class="container">
<div class="jumbotron">
<h1>HƯỚNG DẪN BOOTSTRAP JUMBOTRON</h1>
<p>SỬ DỤNG JUMBOTRON TẠO MỘT HỘP THÔNG TIN LỚN TẠO SỰ CHÚ Ý ĐẶC BIỆT. THÔNG TIN NÀY TẠO CHO NGƯỜI DÙNG DỄ TIẾP CÂN CÁC THÔNG TIN CẦN THIẾT.</p>
</div>
<p>Bootstrap chứa tất cả các xử lý với HTML, CSS, Javascrip, giúp hiển thị tốt trên các thiết bị.</p>
<p>Bootstrap thể hiện lập trình có tính Responsive.</p>
</div>

CREATE MỘT JUMBOTRON BÊN NGOÀI MỘT CONTAINER
Để tạo cách hiển thị cho thông tin trong Jumbotron tràn hết ra các cạnh màn hình thì bạn chỉ cần tạo một Jumbotron bên ngoài Container.
Cách này bạn sẽ thể hiện HTML và Bootstrap :
<div class="jumbotron">
<h1>HƯỚNG DẪN BOOTSTRAP JUMBOTRON</h1>
<p>ĐỂ TẠO JUMBOTRON OUTSIDE CONTAINER, BẠN TẠO JUMBOTRON BÊN NGOÀI THẺ DIV CLASS='CONTAINER'. THÔNG TIN BÊN TRONG JUMBOTRON SẼ TRÀN TOÀN MÀN HÌNH.</p>
</div>
<div class="container">
<p>Bootstrap chứa tất cả các xử lý với HTML, CSS, Javascrip, giúp hiển thị tốt trên các thiết bị.</p>
<p>Bootstrap thể hiện lập trình có tính Responsive.</p>
</div>

CREATE MỘT PAGE HEADER VỚI BOOTSTRAP
Tạo một Tiêu đề trang sẽ giúp tạo một bố cục tốt cho các Pages. Việc tạo Tiêu đề trang giúp tạo một phần ngăn chia hiệu quả.
Bạn cũng biết tạo website không chỉ chứa các Pages, mà website còn có các Posts. Vì vậy việc một website có tổ chức hiển thị cả Pages và Posts luôn đem lại hiệu quả cao.
Khi bạn tạo một Page thông tin tốt thì nó có thể hiển thị các thông tin chia sẻ tốt hơn nữa, để chứa các thông tin tổng hợp ngắn gọn.
Các Posts là các bài viết nó Đem lại cho trang website của bạn có các bài viết. Các nội dung lớn mà bạn muốn diễn giải.
Chúng ta sẽ tạo một Page có Page header dễ nhìn :
Chúng ta sẽ sử dụng một thẻ Div với class .page-header để tạo Page header đơn giản nhất:
<div class="container">
<div class="page-header">
<h1>TẠO MỘT Page Header ĐƠN GIẢN NHẤT</h1>
</div>
<p>NỘI DUNG THỨ 1 CỦA PAGE.</p>
<p>NỘI DUNG THỨ 2 CỦA PAGE.</p>
</div>

B. BOOTSTRAP BUTTONS
Bạn lập trình website, Bootstrap buttons cung cấp cho bạn các nút xử lý vô cùng đẹp và đạt hiệu quả chung với các loại và màu sắc hiển thị tốt.
Bootstrap cung cấp các kiểu Butons và các Class như sau :
.btn
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
Dưới đây, là mã HTMl và Bootstrap :
<div class="container">
<h2>Các Buttons được cung cấp :</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</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-link">Link</button>
</div>

Lưu ý : Các Class xử lý của Buttons cũng có thể xử lý với các thẻ <a> hoặc các thẻ <input/> và hiệu quả cũng vậy.
<a href=”#” class=”btn btn-info” role=”button”>Liên kết thẻ a</a>
<button type=”button” class=”btn btn-info”> Các thẻ Button</button>
<input type=”button” class=”btn btn-info” value=”Input Button”> <!–Thẻ Input –>
<input type=”submit” class=”btn btn-info” value=”Submit Button”> <!–Thẻ Input –>
+ CÁC BUTTONS CỦA ĐƯỢC XỬ LÝ VỚI BOOTSTRAP CŨNG CÓ ĐỊNH NGHĨA ĐỘ LỚN CỦA NÚT. VỚI BỐN KÍCH THƯỚC NHƯ SAU :
.btn-lg KÍCH THƯỚC LỚN
& KÍCH THƯỚC BÌNH THƯỜNG
.btn-sm KÍCH THƯỚC NHỎ
.btn-xs KÍCH THƯỚC NHỎ HƠN
+ HIỂN THỊ NÚT Active/Disabled
Khi thiết lập trạng thái của một nút, có thể đặt 2 trạng thai đó là hoạt động / Active và không hoạt động / Disabled. Việc thiết lập trạng thái cho phép cho biết các chức năng đang hoạt động và không hoạt động của website.
Lớp .active thiết lập một nút ở trạng thái hoạt động.
Lớp .disable thiết lập một nút ở trạng thái không hoạt động, không thể thực hiện Click chuột.
Dưới đây, là mã HTMl và Bootstrap :
Chúng ta có các Button được thiết lập là nút button info (Class .btn-info). Ở đây, thiết lập trạng thái active và disable cho nút.

+ Bootstrap Button Groups
Hiển thị nhóm các nút với Bootstrap để nhóm các nút lại với nhau trong một hàng chung.
Hiển thị Button Groups cho phép tạo ra những menu buttons hiệu quả, tạo một chức năng rõ ràng cho một nhóm chức năng chung trên một dòng.
Để thực hiện điều này, chúng ta sử dụng một thẻ <DIV> có class .btn-group để tạo một nhóm các nút :
Lưu ý : Để tạo độ lớn cho các nút trong nhóm chúng ta có thể sử dụng các class như sau .btn-group-lg|sm|xs
Dưới đây, là mã HTMl và Bootstrap :
<div class="container">
<h2>THIẾT LẬP NHÓM NÚT - THIẾT LẬP SIZE</h2>
<p>THỰC HIỆN THÊM .btn-group-* ĐỂ THIẾT LẬP SIZE.</p>
<h3>KÍCH THƯỚC LƠN:</h3>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-info">TIN TỨC THỜI SỰ</button>
<button type="button" class="btn btn-info">BÓNG ĐÁ</button>
<button type="button" class="btn btn-info">XU HƯỚNG</button>
</div>
<h3>KÍCH THƯỚC MẶC ĐỊNH:</h3>
<div class="btn-group">
<button type="button" class="btn btn-info">TIN TỨC THỜI SỰ</button>
<button type="button" class="btn btn-info">BÓNG ĐÁ</button>
<button type="button" class="btn btn-info">XU HƯỚNG</button>
</div>
<h3>KÍCH THƯỚC NHỎ:</h3>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-info">TIN TỨC THỜI SỰ</button>
<button type="button" class="btn btn-info">BÓNG ĐÁ</button>
<button type="button" class="btn btn-info">XU HƯỚNG</button>
</div>
<h3>KÍCH THƯỚC NHỎ HƠN:</h3>
<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-info">TIN TỨC THỜI SỰ</button>
<button type="button" class="btn btn-info">BÓNG ĐÁ</button>
<button type="button" class="btn btn-info">XU HƯỚNG</button>
</div>
</div>

+ NHÓM CÁC NÚT THEO CHIỀU DỌC
Để nhóm các nút theo chiều dọc chúng ta sử dụng Class .btn-group-vertical
Dưới đây, là mã HTMl và Bootstrap :
<div class=”btn-group-vertical”>
<button type=”button” class=”btn btn-primary”>Tin Tức News</button>
<button type=”button” class=”btn btn-primary”>Bóng Đá</button>
<button type=”button” class=”btn btn-primary”>Tennis</button>
</div>
+ NHÓM CÁC NÚT GIÃN ĐỀU VỀ HAI PHÍA MÀN HÌNH
Để nhóm các nút thực hiện bố cục giãn đều các nút về 2 phía màn hình, Chúng ta sử dụng class .btn-group-justified
Dưới đây, là mã HTMl và Bootstrap :
<div class="container">
<h2>THỰC HIỆN GIÃN CÁC NÚT ĐỀU VỀ 2 PHÍA MÀN HÌNH</h2>
<p>ĐỂ THỰC HIỆN ĐIỀU NÀY CHÚNG TA SỬ DỤNG CLASS .btn-group-justified :</p>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-info">CREATE</a>
<a href="#" class="btn btn-info">MODIFY</a>
<a href="#" class="btn btn-info">DELETE</a>
</div>
</div>

+ TẠO NHÓM NÚT LỒNG NESTING BUTTON GROUPS VÀ MENU THẢ XUỐNG
Thực hiện nhóm các nút lồng nhau để tạo ra một menu dropdown / Menu thả xuống. Tạo cách hiển thị hình thức trực quan cho nhóm chức năng.
Dưới đây, là mã HTMl và Bootstrap :
<div class="container">
<h2>THỰC HIỆN NHÓM NÚT LỒNG</h2>
<p>NHÓM NÚT LỒNG TẠO MENU DROPDOWN</p>
<div class="btn-group">
<button type="button" class="btn btn-info">Tin Tức Thời Sự</button>
<button type="button" class="btn btn-info">Bóng Đá</button>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
Việt Nam <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">V-League</a></li> <li><a href="#">Hạng 2</a></li> <li><a href="#">Hạng 3</a></li>
<li><a href="#">Hạng Chăn Ngựa</a></li>
</ul>
</div>
</div>
</div>

Tại đây, sử dụng các thành phần với mục đích:
· Sử dụng 2 thẻ Div có Class .btn-group lồng nhau để tạo nhóm nút lồng
· Sử dụng thẻ Span có Class caret để tạo hình ảnh dạng nút thả xuống hình tam giác màu trắng
· Sử dụng thẻ UL với class .dropdown-menu để hiển thị danh sách menu nút dạng thả xuống
+ TẠO TRÌNH ĐƠN THẢ XUỐNG
Dưới đây, là mã HTMl và Bootstrap :
<div class="container">
<h2>TRÌNH ĐƠN THẢ XUỐNG / SPLIT BUTTONS</h2>
<div class="btn-group">
<button type="button" class="btn btn-primary">VIỆT NAM</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">V-LEAGUE</a></li>
<li><a href="#">HẠNG 2</a></li>
<li><a href="#">HẠNG 3</a></li>
<li><a href="#">HẠNG CHĂN NGỰA</a></li>
</ul>
</div>
</div>

C. Bootstrap Badges and Labels
+ TẠO BADGES VỚI BOOTSTRAP
Nhằm tạo một huy hiệu là chỉ số về số lượng các mục được liên kết với một liên kết.
Sử dụng thẻ SPAN với Class .badge để tạo huy hiệu cho một liên kết.
Dưới đây, là mã HTMl và Bootstrap :
<div class="container">
<h2>TẠO BADGES VỚI BOOTSTRAP</h2>
<a href="#">Tin Tức Thời Sự <span class="badge">105</span> </a><br>
<a href="#">Bóng Đá <span class="badge">10</span> </a><br>
<a href="#">Tennis <span class="badge">10</span> </a><br>
<a href="#">Bất Động Sản <span class="badge">10</span> </a><br>
<a href="#">Địa Điểm Đến <span class="badge">10</span> </a><br>
<a href="#">Thời Trang <span class="badge">102</span> </a><br>
<a href="#">Nhà Đẹp Không Gian Đẹp <span class="badge">102</span> </a>
</div>

Chúng ta cũng có thể sử dụng Badge bên trong những Element khác như là buttons …
Ex :
<button type=”button” class=”btn btn-info”>Primary <span class=”badge”>7</span></button>

+ TẠO LABEL VỚI BOOTSTRAP
Thực hiện tạo Label để hiển thị một hoặc nhiều nhãn cần thiết trong thiết kế website. Để tạo một Label chúng ta sử dụng thẻ SPAN với Class .label
Tuy nhiên, theo các ngữ cảnh khác nhau chúng ta có các Class khác nhau như sau :
.label-default
.label-primary
.label-success
.label-info
.label-warning
.label-danger
Dưới đây, là mã HTMl và Bootstrap :
<div class="container">
<h2>Hiển thị các Label với Bootstrap</h2>
<p> Hiển thị Label theo các ngứ cảnh.</p>
<h4><span class="label label-default">Default Label</span></h4>
<h4><span class="label label-primary">Primary Label</span></h4>
<h4><span class="label label-success">Success Label</span></h4>
<h4><span class="label label-info">Info Label</span></h4>
<h4><span class="label label-warning">Warning Label</span></h4>
<h4><span class="label label-danger">Danger Label</span></h4>
</div>

Hoặc chúng ta cũng có ví dụ :
<div class="container">
<h2>Labels</h2>
<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>
</div>
NHỮNG THÀNH PHẦN CƠ BẢN SỬ DỤNG VỚI BOOTSTRAP KHI BẠN THỰC HIỆN HIỂN THỊ TRÊN MỘT BỐ CỤC LỚN CỦA WEBSITE SẼ ĐEM LẠI GIAO DIỆN RẤT ĐƠN GIẢN VÀ HIỆU QUẢ THEO CÁC YÊU CẦU KHÁC NHAU KHI THIẾT KẾ WEBSITE. MỖI THÀNH PHẦN ĐỀU ĐEM LẠI CÁC TÁC DỤNG KHÁC NHAU CẦN THIẾT KHÔNG THỂ THAY THẾ. VỚI NHỮNG MONG MUỐN KHÁC NHAU, CÁC TÁC DỤNG SẼ RÕ RÀNG HƠN TRÊN THIẾT KẾ BỐ CỤC.