ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrapข้อความ / พิมพ์


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> องค์ประกอบในลักษณะต่อไปนี้:

ตัวอย่าง

Use the mark element to highlight text.

ลองตัวเอง»

<abbr>

Bootstrap จะรูปแบบ HTML <abbr> องค์ประกอบในลักษณะต่อไปนี้:

ตัวอย่าง

The WHO was founded in 1948.

ลองตัวเอง»

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

From WWF's website
ลองตัวเอง»

หากต้องการแสดงใบเสนอราคาทางด้านขวาใช้ .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.

From WWF's website
ลองตัวเอง»

<dl>

Bootstrap จะรูปแบบ HTML <dl> องค์ประกอบในลักษณะต่อไปนี้:

ตัวอย่าง

Coffee
- black hot drink
Milk
- white cold drink
ลองตัวเอง»

<code>

Bootstrap จะรูปแบบ HTML <code> องค์ประกอบในลักษณะต่อไปนี้:

ตัวอย่าง

The following HTML elements: span , section , and div defines a section in a document.

ลองตัวเอง»

<kbd>

Bootstrap จะรูปแบบ HTML <kbd> องค์ประกอบในลักษณะต่อไปนี้:

ตัวอย่าง

Use ctrl + p to open the Print dialog box.

ลองตัวเอง»

<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 ผู้ช่วยการเรียนการอ้างอิง สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการเรียนตามบริบท