Nếu bạn sử dụng Sass, có các biến Bootstrap được xác định bằng ... 6, trong đó bạn sẽ tìm thấy các họ phông chữ. Bạn chỉ có thể đặt các biến trong tệp ... 7 của riêng mình trước khi bao gồm tệp Bootstrap Sass và ... 6 sẽ không ghi đè lên tệp của bạn. Đây là một lời giải thích tốt về cách thức hoạt động của ... 6. https. // thinkbot. com/blog/sass-default
Đây là một ví dụ chưa được kiểm tra bằng cách sử dụng Bootstrap 4, npm, Gulp, gulp-sass và gulp-cssmin để cung cấp cho bạn ý tưởng về cách bạn có thể kết nối chúng với nhau
bưu kiện. json
{ "devDependencies": { "bootstrap": "4.0.0-alpha.6", "gulp": "3.9.1", "gulp-sass": "3.1.0", "gulp-cssmin": "0.2.0" } }trang web của tôi. scss
@import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list_myvariables. scss
// For a list of Bootstrap variables you can override, look at node_modules\bootstrap\scss\_variables.scss // These are the defaults, but you can override any values $font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default;gulpfile. js
var gulp = require("gulp"), sass = require("gulp-sass"), cssmin = require("gulp-cssmin"); gulp.task("transpile:sass", function() { return gulp.src("./mysite.scss") .pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError)) .pipe(cssmin()) .pipe(gulp.dest("./css/")); });mục lục. html
...Dễ dàng căn chỉnh văn bản thành các thành phần với các lớp căn chỉnh văn bản. Đối với căn chỉnh bắt đầu, kết thúc và trung tâm, các lớp phản hồi có sẵn sử dụng các điểm dừng chiều rộng khung nhìn giống như hệ thống lưới
Bắt đầu căn chỉnh văn bản trên tất cả các kích thước khung nhìn
Văn bản được căn giữa trên tất cả các kích thước khung nhìn
Kết thúc văn bản được căn chỉnh trên tất cả các kích thước khung nhìn
Bắt đầu căn chỉnh văn bản trên khung nhìn có kích thước SM (nhỏ) hoặc rộng hơn
Bắt đầu căn chỉnh văn bản trên cổng xem có kích thước MD (trung bình) hoặc rộng hơn
Bắt đầu căn chỉnh văn bản trên khung nhìn có kích thước LG (lớn) hoặc rộng hơn
Bắt đầu căn chỉnh văn bản trên khung nhìn có kích thước XL (cực lớn) hoặc rộng hơn
Start aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
End aligned text on all viewport sizes.
Start aligned text on viewports sized SM (small) or wider.
Start aligned text on viewports sized MD (medium) or wider.
Start aligned text on viewports sized LG (large) or wider.
Start aligned text on viewports sized XL (extra-large) or wider.
Lưu ý rằng chúng tôi không cung cấp các lớp tiện ích cho văn bản được căn đều. Mặc dù, về mặt thẩm mỹ, văn bản được căn đều có thể trông hấp dẫn hơn, nhưng nó làm cho khoảng cách từ trở nên ngẫu nhiên hơn và do đó khó đọc hơn
Gói và tràn văn bản
Ngắt dòng văn bản với lớp
This text should wrap.
4This text should wrap.
Ngăn văn bản ngắt dòng với lớp
This text should wrap.
5Văn bản này sẽ tràn cha mẹ
This text should overflow the parent.
ngắt từ
Ngăn các chuỗi văn bản dài phá vỡ bố cục của các thành phần của bạn bằng cách sử dụng
This text should wrap.
6 để đặtThis text should wrap.
7 vàThis text should wrap.
8. Chúng tôi sử dụngThis text should wrap.
9 thay vìThis text should overflow the parent.
0 phổ biến hơn để hỗ trợ trình duyệt rộng hơn và thêmThis text should wrap.
8 không dùng nữa để tránh sự cố với bộ chứa linh hoạtmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
@import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 6
chuyển đổi văn bản
Chuyển đổi văn bản trong các thành phần với các lớp viết hoa văn bản
Chữ thường
Văn bản viết hoa
CapiTaliZed văn bản
@import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 7
Lưu ý cách
This text should overflow the parent.
2 chỉ thay đổi chữ cái đầu tiên của mỗi từ, để lại trường hợp của bất kỳ chữ cái nào khác không bị ảnh hưởngCỡ chữ
Nhanh chóng thay đổi
This text should overflow the parent.
3 của văn bản. Trong khi các lớp tiêu đề của chúng tôi (e. g. ,This text should overflow the parent.
4–This text should overflow the parent.
5) áp dụng choThis text should overflow the parent.
3,This text should overflow the parent.
7, vàThis text should overflow the parent.
8, những tiện ích này chỉ áp dụng choThis text should overflow the parent.
3. Định cỡ cho các tiện ích này khớp với các thành phần tiêu đề của HTML, do đó, khi số lượng tăng lên, kích thước của chúng sẽ giảm xuốngvăn bản fs-1
văn bản fs-2
văn bản fs-3
văn bản fs-4
văn bản fs-5
văn bản fs-6
// For a list of Bootstrap variables you can override, look at node_modules\bootstrap\scss\_variables.scss // These are the defaults, but you can override any values $font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default; $font-family-serif: Georgia, "Times New Roman", Times, serif !default; $font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default; $font-family-base: $font-family-sans-serif !default; 6
Tùy chỉnh các
This text should overflow the parent.
3 có sẵn của bạn bằng cách sửa đổi bản đồ @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 61 SassTrọng lượng phông chữ và chữ nghiêng
Đổi nhanh
This text should overflow the parent.
7 hoặc @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 63 của văn bản với các tiện ích này. Tiện ích @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 63 được viết tắt là @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 65 và tiện íchThis text should overflow the parent.
7 được viết tắt là @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 67Chữ in đậm
Văn bản có trọng lượng đậm hơn (so với phần tử gốc)
văn bản trọng lượng bình thường
Văn bản trọng lượng nhẹ
Văn bản có trọng lượng nhẹ hơn (so với phần tử gốc)
chữ nghiêng
Văn bản với kiểu phông chữ bình thường
var gulp = require("gulp"), sass = require("gulp-sass"), cssmin = require("gulp-cssmin"); gulp.task("transpile:sass", function() { return gulp.src("./mysite.scss") .pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError)) .pipe(cssmin()) .pipe(gulp.dest("./css/")); }); 5
Chiều cao giữa các dòng
Thay đổi chiều cao dòng bằng tiện ích @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 68
Đây là một đoạn văn dài được viết để cho thấy chiều cao của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần với API tiện ích của chúng tôi
Đây là một đoạn văn dài được viết để cho thấy chiều cao của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần với API tiện ích của chúng tôi
Đây là một đoạn văn dài được viết để cho thấy chiều cao của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần với API tiện ích của chúng tôi
Đây là một đoạn văn dài được viết để cho thấy chiều cao của một phần tử bị ảnh hưởng như thế nào bởi các tiện ích của chúng tôi. Các lớp được áp dụng cho chính phần tử hoặc đôi khi là phần tử cha. Các lớp này có thể được tùy chỉnh khi cần với API tiện ích của chúng tôi
var gulp = require("gulp"), sass = require("gulp-sass"), cssmin = require("gulp-cssmin"); gulp.task("transpile:sass", function() { return gulp.src("./mysite.scss") .pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError)) .pipe(cssmin()) .pipe(gulp.dest("./css/")); }); 7
Đơn cách
Thay đổi lựa chọn thành ngăn xếp phông chữ đơn cách của chúng tôi với @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 69
var gulp = require("gulp"), sass = require("gulp-sass"), cssmin = require("gulp-cssmin"); gulp.task("transpile:sass", function() { return gulp.src("./mysite.scss") .pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError)) .pipe(cssmin()) .pipe(gulp.dest("./css/")); }); 9
Đặt lại màu
Đặt lại màu của văn bản hoặc liên kết bằng @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 70 để nó kế thừa màu từ gốc của nó
... 1
trang trí văn bản
Trang trí văn bản trong các thành phần với các lớp trang trí văn bản
This text should wrap.
0ngổ ngáo
Biến
This text should wrap.
1bản đồ
Tiện ích kích thước phông chữ được tạo từ bản đồ này, kết hợp với API tiện ích của chúng tôi
This text should wrap.
2API tiện ích
Tiện ích phông chữ và văn bản được khai báo trong API tiện ích của chúng tôi trong @import "./myvariables"; // Bootstrap @import "bootstrap/scss/variables"; // .. need to include other bootstrap files here. Check node_modules\bootstrap\scss\bootstrap.scss for a list 71. Tìm hiểu cách sử dụng API tiện ích
Bootstrap có đi kèm với phông chữ không?
Phông chữ mặc định bootstrap 5 là gì
đều có lề trên. 0 và lề dưới. 1rem (16px theo mặc định).
1rem (16px by default), and its line-height is 1.5. In addition, allelements have margin-top: 0 and margin-bottom: 1rem (16px by default).