Hình thức bootstrap 5.1

Là web developer chắc chắn các bạn đã nghe hoặc sử dụng bootstrap rồi. Ở bài xin phép được chia sẻ cách cài đặt và sử dụng bootstrap trong ứng dụng Ruby on Rails. Tuy nhiên, đầu tiên mình sẽ giới thiệu về Bootstrap và lý do tại sao nó lại được nhiều nhà phát triển yêu thích đến vậy

I. Tổng quan Bootstrap

Bootstrap là một framework cho phép thiết kế trang web đáp ứng nhanh hơn và dễ dàng hơn. Nó bao gồm các mẫu HTML, mẫu CSS và Javascript cho phép tạo các biểu mẫu và phần tử cơ bản như. kiểu chữ, biểu mẫu, nút, bảng, điều hướng, phương thức, băng chuyền hình ảnh. Trong bootstrap có thêm các plugin Javascript trong đó giúp cho công việc thiết kế reponsive của bạn dễ dàng hơn và nhanh chóng hơn

Từ những lợi ích trên mà bootstrap được sử dụng rất nhiều trong các ứng dụng web ngày nay. Nó cho phép giảm thời gian xây dựng, thiết kế giao diện (nói dễ hiểu hơn là ví dụ như. ta muốn gắn một chiếc xe thì chỉ cần lựa chọn những phần thích hợp rồi gắn nhanh hoặc sửa đổi một chút chứ không cần phải làm từ đầu nhưn cái đinh, cái ốc

Hình thức bootstrap 5.1
)

II. Cài đặt gem bootstrap

Đầu tiên chúng ta khởi tạo dự án đường ray như sau.

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
4

Vào Gemfile bổ sung thêm đá quý

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
5 như sau và đảm bảo rằng đã có đá quý
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
6 (mặc định đã được bổ sung khi khởi tạo dự án nếu ta không cần bổ sung thêm đá quý
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
6)

Hình thức bootstrap 5.1

Sau khi đã hoàn thành bước này, hãy chạy lệnh

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
0 và khởi động lại máy chủ

Hình thức bootstrap 5.1

Kiểm tra thấy dòng màu xanh đã cài đặt bootstrap-sass, như vậy là ta đã cài đặt xong, tiếp theo là đến bước config cho ứng dụng nhé

Trước hết vào tệp

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
1 nhập kiểu Bootstrap bằng cách bổ sung 2 lệnh dưới đây

@import "bootstrap-sprockets";
@import "bootstrap";

Lưu ý.

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
2 phải ở trên bootstrap, nếu bạn ngẫu hứng thay đổi thứ tự là mình không chịu trách nhiệm đâu nghe

Default file application has css đuôi ta cần chuyển nó thành đuôi scss

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:

Sau đó xóa hết những dòng không cần thiết này nhé

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
3
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
4

Chúng ta sẽ không còn sử dụng *= yêu cầu trong các bảng định kiểu tệp bởi vì nó sẽ không còn truy cập được Bootstrap mixins hay các biến

Nếu các bạn đang sử dụng Rails 5. 1+ hãy thêm đá quý

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
5 (đừng quên câu lệnh thần thánh
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
0)

Cuối cùng yêu cầu bootstrap vào ứng dụng tệp. js by add 2 command after

//= require jquery
//= require bootstrap-sprockets

Hình thức bootstrap 5.1

Như vậy là mình đã hướng dẫn các bạn cách cài đặt gem bootstrap, giờ chúng ta có thể vào đường dẫn sau Bootstrap Components lấy bất kỳ thành phần nào mong muốn hoặc sử dụng thư viện của bootstrap để làm cho giao diện của mình thật phổi

Giới thiệu bootstrap là bài viết hướng 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ơ bản của bootstrap

A. Giới thiệu về bootstrap

  • Bootstrap là thư viện giúp tạo một trang web rất nhanh và dễ dàng
  • Thư viện này tạo sẵn mã HTML, CSS và Javascript để tạo ra các thành phần giao diện thông thường được sử dụng , giúp giảm thời gian tạo nhiều thời gian nên trang web hoàn chỉnh
  • Được Mark Otto và Jacob Thornton cùng nhau phát triển tại Twitter năm 2010
  • Bootstrap chạy ở máy khách (trong trình duyệt web), không chạy trên máy chủ

Ưu điểm của bootstrap

  • Giúp giảm nhiều thời gian viết mã html vì nó cung cấp sẵn mã mẫu để chèn vào trang web
  • Trợ giúp tiết kiệm nhiều thời gian định dạng css vì nó cung cấp nhiều lớp css để sử dụng
  • Có sẵn code javascript để tạo các hiệu ứng trong trang, giúp giảm thời gian viết code javascript cho các chức năng cơ bản
  • Bootstrap tổ chức màn hình thành hệ thống lưới (Grid System) 12 cột, giúp bạn dễ dàng tổ chức giao diện trang web theo ý mình
  • Bootstrap hỗ trợ thực hiện responsive cho trang , phù hợp với các loại thiết bị như smartphone, tablet, desktop,…

Phiên bản hiện tại của Bootstrap

Hai phiên bản hiện đang phổ biến của thư viện Bootstrap là Bootstrap3 và Bootstrap 4

Phiên bảnNămMô tả1. 02011Phiên bản đầu tiên, không hỗ trợ Mobile. 2. 02012Bổ sung Grid-Layout 12 cột. Add some new component. Not support Mobile. 3. 02013Các thành phần được thiết kế lại theo phong cách thiết kế phẳng (thiết kế phẳng). Start support Mobile. 4. 02018Bootstrap 4 gần như được viết lại hoàn toàn từ Bootstrap 3 và được đánh giá là dễ sử dụng hơn rất nhiều so với phiên bản trước. 5. 02020Bootstrap 5 là phiên bản mới nhất của thư viện này, ra đời năm 2020. Bootstrap 5 không còn phụ thuộc vào jquery và không hỗ trợ các phiên bản cũ của IE nữa

Bootstrap 4 đã rất hay, thuyết phục được rất nhiều nhà phát triển. Bootstrap 5 còn tốt hơn, tối ưu về tốc độ tải, cải thiện bố cục tổ chức… mã gọn hơn rất nhiều

Bootstrap tài nguyên website

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

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

Hình thức bootstrap 5.1

b. Tài liệu hướng dẫn sử dụng bootstrap
https. //getbootstrap. com/docs/. Địa chỉ này chứa tài liệu hướng dẫn chính thức. Cách nhúng thư viện bootstrap (css và js), mẫu khởi đầu

c. Hướng dẫn tạo các thành phần trên trang web
https. //getbootstrap. com/thành phần/. Hướng dẫn sử dụng các thành phần giao diện trong trang như cảnh báo, huy hiệu, nút… đầy đủ thông tin. giải thích, mã mẫu, demo

Hình thức bootstrap 5.1

d. Trang dạy bootstrap w3schools
https. //www. w3schools. com/bootstrap5/. Trang hướng dẫn bootstrap của W3schools. Hướng dẫn các thành phần, mẫu mã

e. Trang chứa nhiều mã mẫu và hiệu ứng bổ sung
https. //khởi độngbootstrap. com/đoạn trích/

B. Nhúng bootstrap vào trang

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

Nhúng bootstrap vào trang

Truy cập https. //getbootstrap. com/ => nhắp Docs rồi copy link css và link script (mục 1 và 2 ở hình bên dưới) và paste vào trang của bạn (trong tag head)

Hình thức bootstrap 5.1

Kết quả

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
0

Chú thích. Nếu trang web của bạn chỉ sử dụng css của bootstrap chứ không cần sử 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ề và nhúng từ cục bộ

Tải bootstrap về máy cục bộ rồi chèn bootstrap vào trang để có thể sử dụng được khi máy của bạn không có kết nối internet. Thực hiện như sau

– Tải bootstrap. vào trang web. https. //getbootstrap. com/ rồi nhắp nút Tải xuống

Hình thức bootstrap 5.1

– Giải nén file vừa tải rồi copy 2 thư mục con (js , css) vào website của bạn để sử dụng

Hình thức bootstrap 5.1

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

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
1

C. Làm quen với css của bootstrap

Bootstrap cung cấp rất nhiều định dạng CSS lớp có sẵn để bạn sử dụng, bạn chỉ cần biết tên và áp dụng nó vào các thẻ để tạo giao diện mong muốn.  

Use class css bootstrap in page

Mã sau sẽ sử dụng các lớp của bootstrap để định dạng cho thẻ p có màu nền xanh, màu chữ trắng, đệm mức 2 (10px) và chữ hoa

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
2

Trong ví dụ này, chúng ta sử dụng các lớp css của bootstrap cung cấp

  • thùng đựng hàng. tạo div chứa toàn trang, thường quan trọng bootstrap sẽ sử dụng lớp này để bao chứa toàn trang web
  • thông tin bg. lớp quy định màu nền xanh của bootstrap
  • chữ trắng. chữ trắng
  • chữ hoa. change into chữ hoa
  • p-2. định nghĩa padding 2

– And results

Hình thức bootstrap 5.1

Tra cứu các lớp css bootstrap

Đầy đủ các lớp css của bootstrap 5

bootstrap sáng tạo. com/resources/bootstrap-5-cheat-sheet-classes-index/

Đầy đủ các lớp css của bootstrap 4

w3schools. com/bootstrap4/bootstrap_ref_all_classes. asp

Đầy đủ các lớp css của bootstrap 3

w3schools. com/bootstrap/bootstrap_ref_all_classes. asp

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

Hệ thống lưới là hệ thống lưới bao gồm 12 cột. Bootstrap cung cấp các lớp css giúp tổ chức giao diện web dạng lưới 12 cột giúp bạn dễ dàng tổ chức giao diện web. Bootstrap 4 có loại css lớp 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

Create page used grid system

Sử dụng các lớp với tiền tố gắn kết cho các div và chỉ định “độ lớn” của nó. “Độ lớn” ở đây là các cột số từ 1 đến 12

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
3

in which

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

Kết quả xem trên màn hình máy tính

Hình thức bootstrap 5.1

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

Hình thức bootstrap 5.1

Xem ví dụ trực tiếp. https. //longnv. Tên. vn/bt/bt-grid1. html

Use grid system for many devices

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
4

Máy tính

Hình thức bootstrap 5.1

Điện thoại thông minh

Hình thức bootstrap 5.1

Xem ví dụ. https. //longnv. Tên. vn/bt/bt-grid2. html

D. Create layout with bootstrap

Create layout with class col

Hình thức bootstrap 5.1
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
5

Xem ví dụ. https. //longnv. Tên. vn/bt/bt-layout1. html

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

1. Sử dụng Navbar trong bootstrap để tạo thanh menu

Navbars is component in boostrap giúp tạo thanh menu. You to address https. //getbootstrap. com/docs/5. 1/components/navbar/ (bootstrap 5) hoặc https. //getbootstrap. com/docs/4. 4/components/navbar/ (bootstrap 4) rồi nhấp nút Copy để lấy mã rồi Paste vào trang để dùng

Hình thức bootstrap 5.1

Hiệu chỉnh mã theo hướng dẫn sau

  • Mỗi mục nằm trong tag li có class nav-item và a, bạn có thể chỉnh sửa văn bản và xóa bớt/bổ sung thoải mái. Các giá trị của một sự thoải mái thoải mái được điều chỉnh lại cho phù hợp
  • Delete the tag button, form if not need
  • Tag a has class is navbar-brand is logo, delete if not need

Ví dụ. https. //longnv. Tên. vn/bt/bt-navbar. html

Hình thức bootstrap 5.1

2. Sử dụng các biểu tượng trong bootstrap

Biểu tượng là những biểu tượng nhỏ để minh họa cho văn bản, như biểu tượng điện thoại, email…

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

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

– Truy cập https. // biểu tượng. getbootstrap. com/ => di chuyển xuống mục Cài đặt rồi sao chép biểu tượng thư viện liên kết trong mục CDN

Hình thức bootstrap 5.1

– Paste link vừa copy vào tag head trong trang web của bạn

– Scroll up to the Icons, then a icon to use

Hình thức bootstrap 5.1

– Sao chép mã của biểu tượng trong mục Phông chữ biểu tượng (hình bên dưới) và Dán vào trang web của bạn

Hình thức bootstrap 5.1

Xem ví dụ. https. //longnv. Tên. vn/bt/bt5-icons. html

b. Nhúng icon vào trang với phông chữ Awesome

– Thêm code nhúng font awesome vào trang web của bạn

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
6

– Thêm icon vào trang. use the tag inline as i, span, b… with class is better

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
7
Hình thức bootstrap 5.1

– Tra cứu tên biểu tượng. Truy cập https. // phông chữ tuyệt vời. com/icons  => sẽ thấy các biểu tượng và tên của nó

Hình thức bootstrap 5.1

– Ví dụ. https. //longnv. Tên. vn/bt/bt-icons. html

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
8

e. Ứng dụng vào trang thực tế. chèn biểu tượng vào các mục menu của trang

https. //longnv. Tên. vn/bt/bt-navbarIcons. html

Hình thức bootstrap 5.1

3. Sử dụng nhóm danh sách

Hình thức bootstrap 5.1

Truy cập https. //getbootstrap. com => Docs => Components => List Group => rồi copy code , rồi dán vào trang để sử dụng

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
9

4. Thành Phần Thẻ

Thẻ là thành phần trong bootstrap giúp hiển thị các hộp thông tin rất hay. Mỗi thẻ là 1 ô có header, footer, body. Dùng thẻ để hiện 1 sản phẩm, 1 hộp, 1 khách hàng…. Các thẻ có thể đặt cạnh nhau để tạo thành 1 khối nhiều hàng nhiều cột rất dễ dàng

Truy cập https. //getbootstrap. com => Tài liệu => Linh kiện => Thẻ => rồi copy mã , rồi dán vào trang để sử dụng

a. Code html dùng cho 1 thẻ

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
10

b. Kết quả hiện 1 thẻ trong trang

Hình thức bootstrap 5.1

c. Chú ý khi sử dụng thẻ

  • Nếu không cần thiết, có thể bỏ qua thẻ heading, footer
  • Có thể thêm các lớp sau để chỉ định màu nền_______113, 
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    14, 
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    15, 
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    16, 
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    17, 
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    18, 
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    19 ,
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    20
  • Lớp.
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    21 dùng để tạo 1 thẻ lưới. bố cục sẽ tự động điều chỉnh khi có nhiều thẻ. Lưới sẽ hiển thị dạng dọc trên màn hình nhỏ (<=576px)
  • Use class.
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    22 to the cards = other width and height, has a distance between the cards
  • Use class.
    $ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
    
    23 to the cards = other width and height, not have 1 distance between the cards

d. Use card-columns trong bootstrap 4

Trong bootstrap 4, các cột thẻ là 1 nhóm thẻ được đặt cạnh nhau để tạo thành 1 khối nhiều thẻ

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
11
Hình thức bootstrap 5.1

e. Sử dụng các nhóm thẻ trong bootstrap 5

Trong bootstrap 5, nhóm các thẻ lại thành nhóm có phụ được thực hiện bằng cách đặt trong div có lớp là hàng-cols-x hoặc bạn bao quanh các thẻ bởi 1 div có lớp là thẻ-nhóm

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss:
12

– Kết quả

Hình thức bootstrap 5.1

Bài viết giới thiệu bootstrap này chỉ vừa giới thiệu cơ 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ơ bản. Cách sử dụng các thành phần khác mời bạn đọc bài tiếp theo Sử dụng các thành phần của bảng biểu mẫu nút tab chế độ trong bootstrap