Bootstrap's การตั้งค่าเริ่มต้น
Bootstrap's การเริ่มต้นทั่วโลก font-size เป็น 14px กับ line-height ของ 1.428
นี้จะนำไปใช้กับ <body> และทุกย่อหน้า
นอกจากนี้ทุก <p> องค์ประกอบที่มีขอบด้านล่างที่เท่ากับครึ่งหนึ่งของพวกเขาคำนวณ line-height (10px ค่าเริ่มต้น)
Bootstrap ค่าเริ่มต้นของเบราว์เซอร์กับ
ในบทนี้เราจะดูที่องค์ประกอบ HTML บางอย่างที่จะได้รับการเรียกขานแตกต่างกันเล็กน้อยโดย Bootstrap กว่าค่าเริ่มต้นของเบราว์เซอร์
<h1> - <h6>
โดยค่าเริ่มต้นเงินทุนจะทรงหัว HTML ( <h1> การ <h6> ) ในลักษณะต่อไปนี้:
ตัวอย่าง
h1 Bootstrap heading (36px)
h2 Bootstrap heading (30px)
h3 Bootstrap heading (24px)
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
ลองตัวเอง» <small>
ในบูต HTML <small> องค์ประกอบที่ใช้ในการสร้างน้ำหนักเบาข้อความมัธยมศึกษาในหัวข้อใด ๆ
ตัวอย่าง
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
ลองตัวเอง» <mark>
Bootstrap จะรูปแบบ HTML <mark> องค์ประกอบในลักษณะต่อไปนี้:
<abbr>
Bootstrap จะรูปแบบ HTML <abbr> องค์ประกอบในลักษณะต่อไปนี้:
<blockquote>
Bootstrap จะรูปแบบ HTML <blockquote> องค์ประกอบในลักษณะต่อไปนี้:
ตัวอย่าง
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
ลองตัวเอง» หากต้องการแสดงใบเสนอราคาทางด้านขวาใช้ .blockquote-reverse ระดับ:
ตัวอย่าง
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
ลองตัวเอง» <dl>
Bootstrap จะรูปแบบ HTML <dl> องค์ประกอบในลักษณะต่อไปนี้:
<code>
Bootstrap จะรูปแบบ HTML <code> องค์ประกอบในลักษณะต่อไปนี้:
ตัวอย่าง
The following HTML elements: span , section , and div defines a section in a document.
ลองตัวเอง» <kbd>
Bootstrap จะรูปแบบ HTML <kbd> องค์ประกอบในลักษณะต่อไปนี้:
<pre>
Bootstrap จะรูปแบบ HTML <pre> องค์ประกอบในลักษณะต่อไปนี้:
ตัวอย่าง
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
ลองตัวเอง» สีตามบริบทและภูมิหลัง
Bootstrap นอกจากนี้ยังมีการเรียนตามบริบทบางอย่างที่สามารถนำมาใช้เพื่อให้ "ความหมายผ่านสี"
ชั้นเรียนสำหรับสีข้อความ: .text-muted , .text-primary , .text-success , .text-info , .text-warning และ .text-danger :
ตัวอย่าง
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
ลองตัวเอง» ชั้นเรียนสำหรับสีพื้นหลัง: .bg-primary , .bg-success , bg-info , bg-warning และ .bg-danger :
ตัวอย่าง
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
ลองตัวเอง» ชั้นเรียนพิมพ์
เรียน Bootstrap ด้านล่างสามารถเพิ่มองค์ประกอบรูปแบบ HTML เพิ่มเติม:
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
.lead | ทำให้ย่อหน้าโดดเด่น | ลองมัน |
.small | แสดงข้อความที่มีขนาดเล็ก (ตั้งค่าเป็น 85% ของขนาดของผู้ปกครอง) | ลองมัน |
.text-left | แสดงให้เห็นข้อความจัดชิดซ้าย | ลองมัน |
.text-center | แสดงให้เห็นข้อความกึ่งกลางชิด | ลองมัน |
.text-right | แสดงให้เห็นข้อความชิดขอบขวา | ลองมัน |
.text-justify | แสดงให้เห็นข้อความที่เป็นธรรม | ลองมัน |
.text-nowrap | แสดงให้เห็นข้อความห่อไม่มี | ลองมัน |
.text-lowercase | แสดงให้เห็นข้อความ lowercased | ลองมัน |
.text-uppercase | แสดงให้เห็นข้อความ uppercased | ลองมัน |
.text-capitalize | แสดงให้เห็นข้อความพิมพ์ใหญ่ | ลองมัน |
.initialism | แสดงข้อความภายใน <abbr> องค์ประกอบในขนาดตัวอักษรขนาดเล็กกว่าเล็กน้อย | ลองมัน |
.list-unstyled | เอารูปแบบรายการค่าเริ่มต้นและขอบด้านซ้ายในรายการ (ทำงานได้ทั้งบน <ul> และ <ol> ) ชั้นนี้จะใช้กับเด็กทันทีรายการรายการ (ที่จะเอารูปแบบรายการเริ่มต้นจากรายการที่ซ้อนกันใด ๆ ที่ใช้ชั้นนี้ไปยังรายการที่ซ้อนกันใด ๆ เช่นกัน) | ลองมัน |
.list-inline | สถานที่ทุกรายการในบรรทัดเดียว | ลองมัน |
.dl-horizontal | เส้นขึ้นไปเงื่อนไข ( <dt> ) และคำอธิบาย ( <dd> ) ใน <dl> องค์ประกอบด้านข้าง เริ่มออกเหมือนเริ่มต้น <dl> S แต่เมื่อหน้าต่างเบราว์เซอร์ขยายก็จะเริ่มขึ้นด้านข้าง | ลองมัน |
.pre-scrollable | ทำให้ <pre> องค์ประกอบเลื่อน | ลองมัน |
กรอก Bootstrap Typography อ้างอิง
สำหรับการอ้างอิงที่สมบูรณ์ของทุกองค์ประกอบพิมพ์ / ชั้นเรียนไปของเราสมบูรณ์ Bootstrap Typography อ้างอิง
นอกจากนี้เรามองไปที่ Bootstrap ผู้ช่วยการเรียนการอ้างอิง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเรียนตามบริบท