Họ phông chữ của bootstrap là gì?

Question

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

Nội dung chính Show

Gói và tràn văn bản
ngắt từ
chuyển đổi văn bản
Trọng lượng phông chữ và chữ nghiêng
Chiều cao giữa các dòng
Đơn cách
Đặt lại màu
trang trí văn bản
ngổ ngáo
bản đồ
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ì
5 họ phông chữ là gì?
Các lớp kiểu chữ bootstrap là gì?

Đâ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.

4


  This text should wrap.

Ngăn văn bản ngắt dòng với lớp


  This text should wrap.

5

Vă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 để đặt


  This text should wrap.

7 và


  This text should wrap.

8. Chúng tôi sử dụng


  This 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êm


  This text should wrap.

8 không dùng nữa để tránh sự cố với bộ chứa linh hoạt

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

@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ưởng

Cỡ 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 cho


  This 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 cho


  This 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ống

vă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 Sass

Trọ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 ích


  This 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

67

Chữ 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

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.

0

ngổ ngáo

Biến


  This text should wrap.

1

bả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.

2

API 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