Giới Thiệu Bootstrap

Giới thiệu bootstrap là nội dung chỉ dẫn sơ lược về boostrap như nhúng bootstrap vào trang, cách sử dụng vài thành phần căn bản của bootstrap.

?. Giới thiệu về bootstrap

  • Bootstrap là thư viện giúp bạn tạo một website responsive rất nhanh chóng & đơn giản.
  • Thư viện này xây dựng sẵn code HTML, CSS & Javascript để tạo thành những mẫu giao diện kiến trúc có sẵn, giúp bạn bớt nhiều thời gian thực hiện trang web.
  • Được Mark Otto & Jacob Thornton cùng với nhau lớn mạnh tại Twitter năm 2010
  • Bootstrap chạy ở client (trong trình duyệt website) , không chạy trên server.

Ưu thế của bootstrap

  • Tiết kiệm nhiều thời gian viết code html vì nó cung
    cấp sẵn code mẫu để chèn vào website.
  • Tiết kiệm nhiều thời gian định dạng css vì nó tạo
    ra rất là nhiều class css đã được định dạng sẵn.
  • Tiết kiệm nhiều thời gian viết code javascript
    vì nó trang bị sẵn nhiều hiệu ứng javascript, giúp bạn khỏi viết code
    javascript.
  • Bootstrap tổ chức màn tạo dựng hệ thống lưới (Grid
    System) 12 cột, giúp bạn dễ tổ chức giao diện website theo ý mình.
  • Bootstrap phân phối sẵn responsive phù phù hợp với mọi
    loại thiết bị như điện thoại, tablet, desktop, …

Các version hiện thời của Bootstrap

Hai version hiện thời đang thông dụng của thư viện Bootstrap là
Bootstrap3 & Bootstrap 4.

Ver-sion
Năm
Miêu tả

1.0

2011

Phiên bản trước nhất, chưa suport Mobile.

2.0

2012

Bổ sung Grid-Layout 12 cột. Thêm một số component
mới. Chưa suport Mobile.

3.0

2013

Các thành phần được kiến trúc lại theo phong thái kiến trúc phẳng
(flat thiết kế). Khởi đầu suport Mobile.

4.0

2018
Bootstrap 4 hầu hết viết lại hoàn toàn từ Bootstrap 3, & được nhìn nhận là dễ sử dụng hơn rất là nhiều đối với phiên bản trước. 5.02020Bootstrap 5 là version tiên tiến nhất của thư viện này, chào đời năm 2020. Boostrap 5 không còn lệ thuộc jquery, & không suport các version cũ của IE nữa.

Bootstrap 4 đã rất hay, thuyết phục được rất là nhiều nhà lớn mạnh.  Bootstrap 5 còn tốt hơn, tối ưu về vận tốc load, cải tổ tổ chức layout… code gọn hơn rất là nhiều.

Trang web tài nguyên bootstrap

Sau đây là các trang web để tải & lấy mẫu code bootstrap

α. Trang web chính thức của bootstrap
https://getbootstrap.com/: Trang web chính của bootstrap

ɓ. Ebook chỉ dẫn dùng bootstrap
https://getbootstrap.com/docs/: Trang này chứa ebook chỉ dẫn chính thức. Cách nhúng thư viện bootstrap (css & js), starter template

ͼ. Chỉ dẫn tạo các component trên website
https://getbootstrap.com/components/: Chỉ dẫn sử dụng các element giao diện trong trang như alert, badge, button… đầy đủ thông tin như giải thích, code mẫu, dùng thử

bt4 components

{d}. Trang dạy bootstrap w3schools
https://www.w3schools.com/bootstrap4/ : Trang chỉ dẫn bootstrap của W3schools. Chỉ dẫn các thành phần, code mẫu

bt4 w3schools

e. Trang chứa nhiều mẫu mã code & hiệu ứng bổ sung
https://startbootstrap.com/snippets/

Ɓ. Nhúng bootstrap vào trang

Bootstrap gồm 2 phần chính css & js. Mong muốn dùng bootstrap trong trang của mình thì bạn sẽ nhúng 2 file css & js của nó vào. Lấy code mẫu & nhúng vào trang như sau:

Tạo website có nhúng sẵn bootstrap

Mong muốn tạo website có sẵn code nhúng bootstrap, vào https://getbootstrap.com/ => nhắp Docs => Getting started  rồi sao chép code trong phần Starter template (hình dưới)

starer template

Nhúng bootstrap vào trang

Vào https://getbootstrap.com/ => nhắp Docs => Getting started  rồi sao chép backlinks css & backlinks script ( mục 1 & 2 trong hình dưới) & paste vào trang của các bạn (trong tag head)

Xem Thêm  Thuộc tính dưới cùng CSS - css đính kèm dưới cùng

nhúng bootstrap

Kết quả :

<htmlvàgt; <headvàgt; <meta charset="utf-8"> <titlevàgt; Hello, world! </titlevàgt;
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <backlinks href="

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css

" rel="stylesheet" > <script src="

https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js

"></scriptvàgt; </headvàgt; <bodyvàgt; </bodyvàgt; </htmlvàgt;

Note: Nếu website của các bạn chỉ dùng css của bootstrap chứ không cần dùng javascript của nó thì bạn chỉ việc nhúng file css của bootstrap mà thôi.

Tải bootstrap về & nhúng từ local

Tải bootstrap về máy local rồi chèn bootstrap vào trang để có thể dùng được khi máy của các bạn không có connect mạng internet. Thực hiện như sau:

– Tải bootstrap: Vào trang web:  https://getbootstrap.com/ rồi nhắp nút Download

– Giải nén file vừa tải rồi chép 2 folder con (js , css) vào trang web của các bạn để dùng

bt4 prepare

– Kết quả khi chèn vào trang:

<htmlvàgt; <headvàgt;  <meta charset="utf-8">  <titlevàgt;Tiêu đề websitevàlt;/titlevàgt;
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<backlinks rel="stylesheet" href="css/bootstrap.min.css"> <script src="js/bootstrap.min.js"> </scriptvàgt;

</headvàgt; <bodyvàgt; </bodyvàgt; </htmlvàgt;

₵. Làm quen css của bootstrap  

Bootstrap phân phối rất là nhiều class CSS định dạng sẵn để bạn
dùng, bạn chỉ việc biết tên & ứng dụng nó vào các tag để tạo giao diện mong mỏi. 

Sử dụng class css bootstrap trong trang

Code sau sẽ sử dụng các class của bootstrap để định dạng cho tag ᴘ có màu nền xanh, màu chữ trắng, padding mức độ 2 (10px) & chữ hoa.

<div class="container">
      <headervàgt;Văn hóa Việtvàlt;/headervàgt;
      <ᴘ class="bg-info text-white p-2 text-uppercase">Cung oán ngâm khúcvàlt;/ᴘvàgt;
</divvàgt;

Trong chẳng hạn này, tất cả chúng ta dùng các class css của bootstrap
phân phối:

  • container: tạo div chứa toàn trang, thường trọng bootstrap sẽ dùng class này để bao chứa toàn website.
  • bg-info: class quy định màu nền xanh của bootstrap
  • text-white: màu chữ trắng
  • text-uppercase: đổi thành chữ hoa
  • p-2: quy định padding mức 2.

– & kết quả:

bt4 làm quen class css

Tra cứu các class css bootstrap

Đầy đủ các class css của bootstrap 5:

bootstrapcreative.com/resources/bootstrap-5-cheat-sheet-classes-index/

Đầy đủ các class css của bootstrap 4:

w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp

Đầy đủ các class css của bootstrap 3:

w3schools.com/bootstrap/bootstrap_ref_all_classes.asp

Làm quen grid system & các loại thiết bị

Grid system là hệ thống lưới gồm 12 cột. Bootstrap phân phối
các class css giúp tổ chức giao diện website dạng lưới 12 cột giúp bạn dễ
dàng tổ chức giao diện website.  Bootstrap
4 có năm loại class css cho nhiều thiết bị khác nhau (căn cứ theo độ rộng màn
hình):

.col-

small devices, screen width <=576px

.col-sm-

small devices,  screen width >576px

.col-md-

medium devices, screen width >=768px

.col-lg-

large devices,  screen width >=992px

.col-xl-

xlarge devices , screen width >=1200px
.col-xxlscreen width >=1400px

Tạo trang dùng grid system

Dùng các class với tiền tố col gắn cho các div & chỉ định “độ lớn” của nó. “Độ lớn” bước này là số cột từ 1 đến 12.

<div class="container">
        <div class="row">
            <div class="col-md-8">col-md-8vàlt;/divvàgt;
            <div class="col-md-4">col-md-4vàlt;/divvàgt;
        </divvàgt;
        <div class="row">
            <div class="col-md-4">col-md-4vàlt;/divvàgt;
            <div class="col-md-4">col-md-4vàlt;/divvàgt;
            <div class="col-md-4">col-md-4vàlt;/divvàgt;
        </divvàgt;
        <div class="row">
            <div class="col-md-6">col-md-6vàlt;/divvàgt;
            <div class="col-md-6">col-md-6vàlt;/divvàgt;
        </divvàgt;
</divvàgt;

Trong số đó:

  • row
    được sử dụng để nhóm các ô theo hàng ngang.
  • col-md-n
    được sử dụng để tạo ô chứa ɳ cột (tối đa 12).

Kết quả xem trên màn hình laptop

bt4 grid

Kết quả xem
trên di động:

bt4 grid

Xem chẳng hạn trực tiếp : https://longnv.name.vn/bt/bt-grid1.html

Dùng grid system cho nhiều thiết bị

<div class="container">
    <div class="row">
        <div class="col-4 col-md-8 bg-warning"> Ô THỨ 1vàlt;/divvàgt;
        <div class="col-8 col-md-4 bg-info"> Ô THỨ 2vàlt;/divvàgt;
    </divvàgt;
    <div class="row">
        <div class="col-md-4 bg-success"> Ô ? </divvàgt;
        <div class="col-md-4 bg-secondary"> Ô Ɓ </divvàgt;
        <div class="col-md-4 bg-success"> Ô ₵ </divvàgt;
    </divvàgt;
    <div class="row">
        <div class="col-9 col-md-3 bg-primary"> Ô TRÁIvàlt;/divvàgt;
        <div class="col-3 col-md-9 bg-danger"> Ô PHẢI </divvàgt;
    </divvàgt;
</divvàgt; 

Laptop

Xem Thêm  Học lập trình trực tuyến - học xml cơ bản

bt1 responsive

điện thoại cảm ứng thông minh

Xem chẳng hạn: https://longnv.name.vn/bt/bt-grid2.html

?. Tạo layout với bootstrap

Tạo layout với các class col

bt4 layout

<div class="container">
    <header class="row bg-primary"> HEADER </headervàgt;
    <nav class="row bg-secondary">MENUvàlt;/navvàgt;
    <div class="row">
        <aside class="col-2 bg-success">LEFTvàlt;/asidevàgt;
        <article class="col-8 bg-danger">MAINvàlt;/articlevàgt;
        <aside class="col-2 bg-warning">RIGHTvàlt;/asidevàgt;
    </divvàgt;    
    <dưới cùng của trang class="row bg-dark text-white"> FOOTER </dưới cùng của trangvàgt;
</divvàgt; 

Xem chẳng hạn: https://longnv.name.vn/bt/bt-layout1.html

E. Các thành phần trong bootstrap

1. Dùng Navbar trong bootstrap để tạo thanh danh sách

Navbars là thành phần trong boostrap giúp tạo thanh danh sách. Bạn vào địa chỉ https://getbootstrap.com/docs/5.0/components/navbar/ (bootstrap 5) hoặc https://getbootstrap.com/docs/4.4/components/navbar/ (bootstrap 4) rồi nhắp nút Sao chép để lấy code rồi Paste vào trang để dùng.

navbars-bootstrap5

Hiệu chỉnh mã theo chỉ dẫn sau

  • Mỗi item nằm trong tag li có class nav-item &
    α, bạn có thể chỉnh text & xóa bớt/bổ sung dễ chịu. Các giá trị href của α
    dễ chịu chỉnh lại cho thích hợp.
  • Xóa các tag button,
    form còn nếu không cần.
  • Tag α có class là navbar-brand là logo, xóa đi còn nếu không cần.

bt4-layouta

2. Sử dụng Icons trong bootstrap

Icon là những biểu tượng nhỏ để minh họa cho text, như các icon phone, tin nhắn hộp thư online…

Bootstrap 3 có thư viện icon là glyphicons, Bootstrap 4 thì không có icons. Còn bootstrap 5 thì có lại thư viện các icons.

α. Nhúng icon vào trang với bootstrap 5

– Vào https://icons.getbootstrap.com/ => cuộn đên mục Install rồi sao chép backlinks thư viện icon trong mục CDN:

install-bootstrap-icons

– Paste backlinks vừa sao chép vào tag head trong website của các bạn

– Cuộn lên đến mục Icons, rồi nhắp một icon cần dùng

nhung-bootstrap5-icons

– Sao chép code của icon trong mục Icon font (hình dưới) & Paste vào website của các bạn

Xem chẳng hạn: https://longnv.name.vn/bt/bt5-icons.html

ɓ. Nhúng icon vào trang với font Awesome

– Thêm code nhúng font awesome vào website của các bạn:

<backlinks rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >

– Thêm icon vào trang: dùng các tag inline như ι, span, ɓ… với class là phù hợp

 <ι class="fas fa-cloud"></ivàgt;
 <ι class="fas fa-coffee"></ivàgt;
 <ι class="fas fa-car"></ivàgt;
 <ι class="fas fa-file"></ivàgt;
 <ι class="fas fa-bars"></ivàgt;

bt4 icons

– Tra cứu các tên icon : Vào https://fontawesome.com/icons  => sẽ thấy các icon & tên của nó 

bt4-icons3

– Chẳng hạn: https://longnv.name.vn/bt/bt-icons.html

<headvàgt; <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <backlinks rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 <backlinks rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" >
 <titlevàgt;Contact: </titlevàgt;
 <stylevàgt;
        html {font-size: 20px;}
        #lienhe { font-size: 1.2rem;}
        #lienhe .fas,  #lienhe .fab { font-size: 1.2rem; margin-right:10px;  }
        #lienhe .fa-envelope { color:chartreuse;}
        #lienhe .fa-phone { color:hotpink;}
        #lienhe .fa-facebook-f  { color:orange;}
 </stylevàgt;
 </headvàgt;
 <bodyvàgt;
    <div class="container">
      <div id="lienhe" class="col-8 bg-secondary text-white  m-auto p-4">
         <ᴘvàgt;<ι class="fas fa-envelope"></ivàgt; admin@longnv.name.vnvàlt;/ᴘvàgt;
         <ᴘvàgt;<ι class="fas fa-phone"></ivàgt; 0918 656666vàlt;/ᴘvàgt;
         <ᴘvàgt;<span class="fab fa-facebook-f"></spanvàgt; facebook.com/thaylongwebvàlt;/ᴘvàgt;
    </divvàgt;
   </divvàgt;
</bodyvàgt;

e. Áp dụng vào trang thực tiễn : chèn icon vào các mục danh sách của trang

https://longnv.name.vn/bt/bt-navbarIcons.html

bt4-icons4

3. Dùng Danh mục group

bt4-listgroup

Vào https://getbootstrap.com => Docs => Components => Danh mục Group => rồi sao chép code , rồi paste vào trang để dùng.

<ul class="list-group">
  <li class="list-group-item">Cras justo odiovàlt;/livàgt;
  <li class="list-group-item">Dapibus ac facilisis invàlt;/livàgt;
  <li class="list-group-item">Morbi leo risusvàlt;/livàgt;
  <li class="list-group-item">Porta ac consectetur acvàlt;/livàgt;
  <li class="list-group-item">Vestibulum at erosvàlt;/livàgt;
</ulvàgt;

4. Thành phần Card

Card là thành phần trong bootstrap giúp hiển thị các box thông tin rất hay. Mỗi card là 1 box có header, dưới cùng của trang, body. Dùng card để hiện 1 sản phẩm, 1 tin, 1 KH…. Các card có thể đặt cạnh nhau tạo nên 1 khối nhiều hàng nhiều cột rất đơn giản dàng.

Xem Thêm  Cách nhận giá trị của trường nhập văn bản bằng JavaScript - lấy văn bản từ javascript hộp văn bản

Vào https://getbootstrap.com => Docs => Components => Card => rồi sao chép code , rồi paste vào trang để dùng.

α. Code html dùng cho 1 card:

<div class="card">
  <div class="card-header">Cung oán ngân khúcvàlt;/divvàgt;
  <div class="card-body">
    Chìm đáy nước cá lờ đờ lặn, <br/>
    Lửng lưng trời nhạn ngẩn ngơ sa, <br/>
    Hương trời đắm nguyệt say hoa, <br/>
    Tây Thi mất vía, Hằng Nga giật mìnhvàlt;br/>
  </divvàgt;
  <div class="card-footer">
  Trích đoạn bài thơ của rất nổi tiếng của Nguyễn Gia Thiều (1741-1798)
  </divvàgt;
</divvàgt;

ɓ.Kết quả hiện 1 card trong trang:

bt4-card

ͼ . Note khi dùng card

  • Còn nếu không cần, có thể bỏ heading, dưới cùng của trang của card
  • Có thể thêm các class sau để chỉ định màu nền.bg-primary.bg-success.bg-info.bg-warning.bg-danger.bg-secondary.bg-dark , .bg-light
  • Class .card-columns dùng để tạo 1 grid cards. layout sẽ auto bố trí khi có nhiều card. Grid sẽ hiển thị dạng dọc trên màn hình small (<=576px):
  • Dùng class .card-deck để các card = nhau width & height, có một khoảng cách giữa các card
  • Dùng class .card-group để các card = nhau width & height, không có 1 khoảng cách giữa các card

{d}. Sử dụng card-columns trong boostrap 4

Trong boostrap 4, card columns là 1 nhóm card đặt cạnh nhau để tạo nên 1 khối nhiều card.

<h2vàgt;Cards Columnsvàlt;/h2vàgt;
  <div class="card-columns">
    <div class="card bg-primary">
      <div class="card-body text-center">
        <ᴘ class="card-text">Some text inside the first cardvàlt;/ᴘvàgt;
      </divvàgt;
    </divvàgt;
    <div class="card bg-warning">
      <div class="card-body text-center">
        <ᴘ class="card-text">Some text inside the second cardvàlt;/ᴘvàgt;
      </divvàgt;
    </divvàgt;
    <div class="card bg-success">
      <div class="card-body text-center">
        <ᴘ class="card-text">Some text inside the third cardvàlt;/ᴘvàgt;
      </divvàgt;
    </divvàgt;
    <div class="card bg-danger">
      <div class="card-body text-center">
        <ᴘ class="card-text">Some text inside the fourth cardvàlt;/ᴘvàgt;
      </divvàgt;
    </divvàgt;  
    <div class="card bg-light">
      <div class="card-body text-center">
        <ᴘ class="card-text">Some text inside the fifth cardvàlt;/ᴘvàgt;
      </divvàgt;
    </divvàgt;
    <div class="card bg-info">
      <div class="card-body text-center">
        <ᴘ class="card-text">Some text inside the sixth cardvàlt;/ᴘvàgt;
      </divvàgt;
    </divvàgt;
 </divvàgt;

bt4 card columns

e. Sử dụng card groups trong bootstrap 5

Trong bootstrap 5, nhóm các card lại thành nhóm có thê thực hiện được bằng cách đặt trong div có class là row-cols-x

<div class="container">
<div class="row r

ow-cols-md-3

g-4"> <div class="col"> <div class="card"> <div class="card-header">Headervàlt;/divvàgt; <div class="card-body"> <h5 class="card-title">Card titlevàlt;/h5vàgt; <ᴘ class="card-text">This is α longer card with supporting text below as α natural lead-in to additional content. This content is α little bit longer.</ᴘvàgt; </divvàgt; </divvàgt; </divvàgt; <div class="col"> <div class="card"> <div class="card-header">Headervàlt;/divvàgt; <div class="card-body"> <h5 class="card-title">Card titlevàlt;/h5vàgt; <ᴘ class="card-text">This is α longer card with supporting text below as α natural lead-in to additional content. This content is α little bit longer.</ᴘvàgt; </divvàgt; </divvàgt; </divvàgt; <div class="col"> <div class="card"> <div class="card-header">Headervàlt;/divvàgt; <div class="card-body"> <h5 class="card-title">Card titlevàlt;/h5vàgt; <ᴘ class="card-text">This is α longer card with supporting text below as α natural lead-in to additional content.</ᴘvàgt; </divvàgt; </divvàgt; </divvàgt; <div class="col"> <div class="card"> <div class="card-header">Headervàlt;/divvàgt; <div class="card-body"> <h5 class="card-title">Card titlevàlt;/h5vàgt; <ᴘ class="card-text">This is α longer card with supporting text below as α natural lead-in to additional content. This content is α little bit longer.</ᴘvàgt; </divvàgt; </divvàgt; </divvàgt; </divvàgt; </divvàgt;

– Kết quả

card-groups

Nội dung giới thiệu bootstrap này chỉ vừa giới thiệu căn bản về boostrap thôi, như cách nhúng vào trang, cách sử dụng vài thành phần căn bản. Cách sử dụng các thành phần khác mời độc giả bài kế tiếp Sử dụng các thành phần table form button tabs modal trong bootstrap

Viết một bình luận