Bootstrap điểm dừng

Bootstrap là một CSS framework tuyệt vời, có thể giúp bạn tạo web thời thượng và bóng tối. Một số lập trình viên và đội ngũ phát triển nhận thấy rằng viết mã trong Bootstrap dễ chỉnh sửa hơn CSS thông thường

Thế nhưng nếu sử dụng Bootstrap với các kiểu mặc định, thì mọi trang web trông sẽ giống nhau. Thế giới Internet cũng vì thế mà trở nên nhạt nhẽo. Thật có thể, Bootstrap cũng có khả năng biến cao

Bootstrap Bootstrap Option

Nếu mới bắt đầu sử dụng Bootstrap, bạn có thể tùy biến nó với tùy chọn chỉnh sửa CSS biểu định kiểu. Tính năng CSS CSS đặc biệt ở đây rất quan trọng. Bạn viết CSS tùy chỉnh với cùng mức độ đặc trưng hoặc cao hơn và liên kết tới nó trong phần tiêu đề của

npm i bootstrap

Điều này ổn đối với tinh chỉnh nhỏ nhưng với các dự án lớn hơn, công việc này có thể mất nhiều thời gian và dư thừa các kiểu khai báo. Thực tế, bạn có một cách khác, nhẹ nhàng hơn

Cách sử dụng Sass với Bootstrap

Giải pháp ở đây là sử dụng Sass - một chương trình tiền xử lý CSS. Sass được biên dịch thành CSS trước khi nó được sử dụng trên các trang web

From version 4, Bootstrap only used Sass. Mã nguồn này dành cho Bootstrap framework 4 và 5 được viết hoàn toàn bằng Sass

Sass đi kèm với hai cú pháp. Cái cũ hơn sử dụng dấu đầu dòng và cú pháp SCSS mới hơn (SCSS cho Sassy CSS) sử dụng dấu trích xuất giống như CSS

SCSS is a super file of CSS. Vì vậy, mã CSS đã được lưu với phần mở rộng. scss (hoặc SCSS xen kẽ với CSS) cũng là mã Sass hợp lệ

This direction used SCSS version. Dù style ở đây là gì, Sass biên dịch đều có thể chuyển đổi nó thành vanilla CSS để sử dụng trên trình duyệt

Hai công việc sẽ làm trong hướng dẫn này bao gồm

• Thay đổi màu nền chính và màu phụ
• Thay đổi phương tiện breakpoint mặc định mà Bootstrap sử dụng

Khi bạn có thể làm những công việc trên, việc thực hiện những tùy chọn khác sẽ dễ dàng hơn

Điều kiện cần có

• Nút. js with npm or yarn
• Một trình chỉnh sửa code, ưu tiên VS Code
• Hiểu cơ bản về Sass

Sau khi cài đặt Node. js, chúng ta sẽ sử dụng phiên bản npm

npm i bootstrap

Tất nhiên, bạn cũng cần cài đặt Sass biên dịch nếu chưa có. Bạn chỉ cần tải gói dart-sass, giải nén và thêm nó vào đường dẫn (các biến môi trường). Bạn có một gói

npm i bootstrap

Ví dụ này sử dụng

npm i bootstrap

Sau khi tải Bootstrap, trình biên dịch Sass, trong danh sách các mô-đun nút, có một mục mang tên bootstrap, bên trong nó là ba thư mục

npm i bootstrap

npm i bootstrap

Cách thay đổi màu nền chính và màu phụ

Ý tưởng ở đây là ghi đè lên tệp. scss và biên dịch lại chúng. Theo hướng dẫn chính thức của Bootstrap, bạn nên giới hạn chế độ thay đổi tệp bootstrap gốc. Vì thế, ở đây sẽ tạo một biểu định kiểu tùy chỉnh. scss

Chúng ta sẽ nhập tất cả Bootstrap vào tệp

npm i bootstrap

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Các biến có hậu tố

npm i bootstrap

npm i bootstrap

Vì thế, chúng ta sẽ thiết lập các biến trước mục

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

$primary: teal;
$secondary: green;

@import "../node_modules/bootstrap/scss/bootstrap";

Bạn cũng cần có tệp HTML để xem trước kết quả

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum hic, quia maiores animi nobis eligendi est eos saepe architecto reiciendis! Aliquam inventore distinctio reprehenderit corporis amet assumenda officiis dolorem, animi delectus sunt dolor commodi. Adipisci nam nemo labore eligendi quas, rem ipsum iusto eveniet itaque vero necessitatibus! Quas, cupiditate tempora unde nam exercitationem libero aut labore deserunt nesciunt voluptate dignissimos quis porro reprehenderit maiores excepturi, esse, nisi dolores sit tenetur voluptatum corrupti alias provident pariatur? Quam illo unde autem, fugit numquam dolores, odio sed rem saepe exercitationem fuga, nisi soluta sunt officiis! Similique, vero repudiandae quae dignissimos fuga natus!



Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam, aliquid, cumque nisi tenetur similique labore repudiandae voluptas qui hic blanditiis beatae sapiente autem dolore! Quam, cupiditate nostrum laboriosam blanditiis vel ratione, repellat, incidunt modi tempore soluta ab nesciunt? Ab similique illum suscipit exercitationem et, aut quisquam neque atque recusandae rem delectus facilis. Magnam rerum fugit minus explicabo vel! Hic quibusdam laudantium dolorum, pariatur ipsam veritatis voluptate animi, nesciunt dolorem autem dicta. Debitis quae nam dicta autem ipsum mollitia! Ipsum ipsa, molestias fugiat officiis aut illum ullam architecto maxime labore vitae. Ipsum quos neque rerum, esse iste quo explicabo eos ipsa?






Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Link

Sass ở đây vẫn chưa được biên dịch. To see default type, run Live Server. Nếu chưa cài đặt nó, bạn có thể tải xuống tiện ích mở rộng miễn phí này từ tiện ích mở rộng Mã VS. Kết quả nhận được như sau

Giờ là lúc biên dịch tệp Sass tùy chỉnh. Công thức biên dịch rất đơn giản. Chỉ mục đích thư mục và thư mục đích được phân tách bằng hai dấu hiệu

Chúng ta có tệp

npm i bootstrap

sass custom_scss/custom.scss:assets/css/custom_bootstrap.css

Sau khi biên dịch lại, chúng ta có tùy chọn bootstrap trong tệp

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Thay vì tập tin bootstrap mặc định, chúng ta sẽ sử dụng tùy chọn bootstrap stylesheet này

 `

Chạy lại Live Server

Chúng ta sẽ có trang web được tùy biến với các phong cách mới

Cách thay đổi lưới điểm dừng trong Bootstrap 5

Chúng ta giờ sẽ tùy biến các phương tiện breakpoint, đồng thời, xác định lại cả container-max-widths

Cách dễ nhất là ghi đè lên các biến

$primary: teal;
$secondary:green;

$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1280px,
xxl: 1600px
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1220px,
xxl: 1520px
);

@import '../node_modules/bootstrap/scss/bootstrap'

Sử dụng hàm

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

Chúng ta cũng phải nhập các biến bởi

//custom.scss

@import "../node_modules/bootstrap/scss/bootstrap";

//custom.scss

$primary: teal;
$secondary: green;

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap/scss/variables';

This is code

//custom.scss

$primary: teal;
$secondary: green;

//We have to import the functions first to use map.merge()

@import '../node_modules/bootstrap/scss/functions';

// We have to import the variables beforehand to
//use the variable $grid-breakpoints.
// Otherwise, compiler will show error - '$grid-breakpoints
//undefined.'

@import '../node_modules/bootstrap/scss/variables';

$new-breakpoints: (
xl: 1280px,
xxl:1600px
);

$grid-breakpoints: map-merge($grid-breakpoints, $new-breakpoints);

$new-container-max-widths: (
xl: 1220px,
xxl:1520px
);

$container-max-widths: map-merge($container-max-widths, $new-container-max-widths);

@import "../node_modules/bootstrap/scss/bootstrap";

Biên dịch lại và sử dụng tệp mới nhất thay cho tệp cũ

npm i bootstrap

This is the end of the results

Trên đây là cách biến Bootstrap với Sass. Hi vọng bài viết hữu ích với các bạn

• bài 10. Nút trong Bootstrap 5
• bài 4. Kiểu chữ trong Bootstrap 5
• Giải đáp những câu hỏi về Bootstrap thường gặp
• bài 6. Table in Bootstrap 5

Thứ Ba, 20/12/2022 11. 03

4,5 ★ 2 👨 127

#Bootstrap

0 Bình luận

Sắp xếp theo

Delete Login to Send

Bạn nên đọc

• 85% người dùng phần mềm bảo mật
• 5 điều cần biết về chip Qualcomm Snapdragon 845
• Cách vô hiệu hóa Hello Bixby trên Samsung Galaxy S8
• Nghịch lý, cha đẻ của Magisk - công cụ root Android gia nhập Apple
• Cách đăng xuất Gmail trên PC, điện thoại
• LMHT Trung Quốc cho ra mắt hệ thống trang phục độc quyền

Bootstrap

• Cách cài đặt Bootstrap 5 trong React. js
• bài 4. Kiểu chữ trong Bootstrap 5
• bài 23. Phương thức trong Bootstrap 5
• Cách thêm Bootstrap vào một ứng dụng Angular
• Bài 31. Tạo Form trong Bootstrap 5
• bài 26. Bánh mì nướng trong Bootstrap 5
• bài 15. Phân trang trong Bootstrap 5
• Bootstrap way option with Sass
• bài 20. Điều hướng trong Bootstrap 5

• công nghệ
  • Ứng dụng
  • hệ thống
  • Game - Trò chơi
  • điện thoại Iphone
  • Android
  • Linux
  • Nền web
  • Đồng hồ thông minh
  • Chụp ảnh - Quay phim
  • hệ điều hành Mac
  • Phần cứng
  • SEO thủ thuật
  • base format
  • quả mâm xôi
  • Dịch vụ ngân hàng
  • Lập trình
  • Online service
  • Dịch vụ nhà mạng
  • Nhà thông minh
• Tải xuống
  • Ứng dụng văn phòng
  • Tải game
  • Hệ thống tiện ích
  • Ảnh, đồ họa
  • Internet
  • Bảo mật, Antivirus
  • Họp, học trực tuyến
  • Video, phim, nhạc
  • Thư
  • Lưu trữ đám mây
  • Giao tiếp, liên lạc, hẹn hò
  • Support for learning
  • Máy ảo
• Tiện ích
• Khoa học
  • Khoa học vui
  • Khám phá khoa học
  • Bí ẩn - Chuyện lạ
  • Chăm sóc sức khỏe
  • Khoa học Vũ trụ
  • Khám phá thiên nhiên
• Điện máy
  • tủ lạnh
  • tivi
  • Điều hòa
  • Máy giặt
• Cuộc sống
  • Kỹ năng
  • Món ngon mỗi ngày
  • làm đẹp
  • nuôi dạy con
  • Chăm sóc nhà cửa
  • Kinh nghiệm Du lịch
  • Halloween
  • mẹo vặt
  • giáng sinh - noel
  • tết 2023
  • quà tặng
  • Giải trí
  • Là gì?
  • nhà đẹp
  • ĐỨNG ĐẦU
  • phong thuỷ
• Băng hình
  • công nghệ
  • Phòng thí nghiệm của Cisco
  • Phòng thí nghiệm của Microsoft
  • Video Khoa học
• Ô tô, Xe máy
  • Giấy phép lái xe
• Làng công nghệ
  • Tấn công mạng
  • Công nghệ
  • new technology
  • Trí tuệ nhân tạo (AI)
  • Anh tài công nghệ
  • Bình luận công nghệ
  • Tổng hợp
• Học CNTT
  • quiz technology
  • Microsoft Word 2016
  • Microsoft Word 2013
  • Word 2007
  • Excel 2019
  • Excel 2016
  • Hàm Excel
  • Microsoft PowerPoint 2019
  • Microsoft PowerPoint 2016
  • Google Trang tính - Trang tính
  • mẫu mã
  • photoshop CS6
  • photoshop CS5
  • HTML
  • CSS và CSS3
  • con trăn
  • Học SQL
  • Lập trình C
  • Lập trình C++
  • Lập trình C#
  • Học HTTP
  • Bootstrap
  • Máy chủ SQL
  • JavaScript
  • Học PHP
  • jQuery
  • Học MongoDB
  • Unix/Linux
  • Học Git
  • NodeJS

Giới thiệu. Điều khoản. bảo mật. Hướng dẫn. Ứng dụng. Liên hệ. Quảng cáo. Facebook. YouTube. DMCA

Giấy phép số 362/GP-BTTTT. Bộ Thông tin và Truyền thông cấp ngày 30/06/2016. Cơ quan chủ quản. CÔNG TY CỔ PHẦN MẠNG TRỰC TUYẾN META. address. 56 Duy Tân, Dịch Vọng Hậu, Cầu Giấy, Hà Nội. Điện thoại. 024 2242 6188. E-mail. thông tin @ meta. vn. Chịu trách nhiệm nội dung. Lê Ngọc Lâm

Bản quyền © 2003-2023 QuanTriMang. com. Giữ toàn quyền. Không thể sao chép hoặc sử dụng hoặc phát hành lại bất kỳ nội dung nào thuộc về QuanTriMang. com khi chưa được cấp phép