องค์ประกอบ HTML พื้นฐานได้รับการจัดรูปแบบและปรับปรุงด้วยคลาสที่ขยายได้ ที่ด้านบนของโครงนั่งร้าน เพื่อให้รูปลักษณ์และความรู้สึกที่สดใหม่และสม่ำเสมอ
ตารางการพิมพ์ทั้งหมดอ้างอิงจากตัวแปร Less สองตัวในไฟล์ variables.less ของเรา: @baseFontSize
และ@baseLineHeight
. อันแรกคือขนาดฟอนต์พื้นฐานที่ใช้ตลอด และอันที่สองคือความสูงของบรรทัดฐาน
เราใช้ตัวแปรเหล่านั้น และคณิตศาสตร์บางส่วน เพื่อสร้างระยะขอบ ช่องว่างภายใน และความสูงของเส้นทุกประเภทของเราและอีกมากมาย
Nullam quis risus eget urna mollis ornare vel eu leo Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est ไม่ใช่ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Donec sed odio dui.
ธาตุ | การใช้งาน | ไม่จำเป็น |
---|---|---|
<strong> |
สำหรับการเน้นตัวอย่างข้อความที่สำคัญ | ไม่มี |
<em> |
สำหรับการเน้นตัวอย่างข้อความที่มีความเครียด | ไม่มี |
<abbr> |
ตัดคำย่อและคำย่อเพื่อแสดงเวอร์ชันขยายบน hover | รวมตัวเลือกtitle สำหรับข้อความขยาย |
<address> |
สำหรับข้อมูลติดต่อของบรรพบุรุษที่ใกล้ที่สุดหรือหน่วยงานทั้งหมด | คงรูปแบบไว้โดยลงท้ายทุกบรรทัดด้วย<br> |
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. เมซีนาส เฟาซิบัส มอลลิส อินเตอร์ดัม Nulla vitae elit libero, pharetra augue.
หมายเหตุ:อย่าลังเลที่จะใช้<b>
และ<i>
ใน HTML5 แต่การใช้งานมีการเปลี่ยนแปลงเล็กน้อย <b>
มีขึ้นเพื่อเน้นคำหรือวลีโดยไม่แสดงความสำคัญเพิ่มเติม ในขณะที่<i>
ส่วนใหญ่ใช้สำหรับเสียง คำศัพท์ทางเทคนิค ฯลฯ
ต่อไปนี้คือตัวอย่างการใช้<address>
แท็ก 2 ตัวอย่าง:
ตัวย่อถูกจัดรูปแบบด้วยข้อความตัวพิมพ์ใหญ่และเส้นขอบด้านล่างที่มีจุดสีอ่อน พวกเขายังมีเคอร์เซอร์ช่วยเหลือเมื่อวางเมาส์ไว้เพื่อให้ผู้ใช้มีตัวบ่งชี้พิเศษบางอย่างที่จะแสดงเมื่อวางเมาส์ไว้
HTMLเป็นสิ่งที่ดีที่สุดตั้งแต่หั่นขนมปัง
ตัวย่อของแอตทริบิวต์ word คือattr
ธาตุ | การใช้งาน | ไม่จำเป็น |
---|---|---|
<blockquote> |
องค์ประกอบระดับบล็อกสำหรับการอ้างอิงเนื้อหาจากแหล่งอื่น | เพิ่ม .pull-left และ.pull-right คลาสสำหรับตัวเลือกแบบลอยตัว |
<small> |
องค์ประกอบเสริมสำหรับการเพิ่มการอ้างอิงถึงผู้ใช้ ซึ่งโดยทั่วไปแล้วจะเป็นผู้เขียนที่มีชื่องาน | วาง<cite> รอบชื่อเรื่องหรือชื่อของแหล่งที่มา |
หากต้องการรวม blockquote ให้<blockquote>
ครอบHTMLเป็นเครื่องหมายคำพูด สำหรับคำพูดตรงๆ เราขอแนะนำ<p>
a
รวม<small>
องค์ประกอบเสริมเพื่ออ้างอิงแหล่งที่มาของคุณและคุณจะได้รับ em dash —
ก่อนองค์ประกอบดังกล่าวเพื่อการจัดแต่งทรง
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ ซิท อะเมท จำนวนเต็ม posuere erat ante venenatis </p>
- <small> คนที่มีชื่อเสียง</small>
- </blockquote>
blockquotes เริ่มต้นมีรูปแบบดังนี้:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante venenatis
คนดังในเรื่อง Body of work
หากต้องการลอย blockquote ของคุณไปทางขวา ให้เพิ่มclass="pull-right"
:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante venenatis
คนดังในเรื่อง Body of work
<ul>
<ul class="unstyled">
<ol>
<dl>
ตัดข้อมูลโค้ดแบบอินไลน์ด้วย<code>
.
- ตัวอย่างเช่น<code> ส่วน< / code > ควรห่อเป็นแบบอินไลน์
ใช้<pre>
สำหรับโค้ดหลายบรรทัด อย่าลืมเปลี่ยนคาเร็ตใดๆ ให้เป็นอักขระ Unicode เพื่อการเรนเดอร์ที่เหมาะสม
<p>ตัวอย่างข้อความที่นี่...</p>
- <pre>
- <p>ตัวอย่างข้อความที่นี่...</p>
- </pre>
หมายเหตุ:อย่าลืมเก็บโค้ดไว้ใน<pre>
แท็กให้ชิดซ้ายมากที่สุด มันจะแสดงแท็บทั้งหมด
ใช้<pre>
อิลิเมนต์เดียวกันและเพิ่มคลาสทางเลือกสองคลาสสำหรับการเรนเดอร์ขั้นสูง
- <p> ตัวอย่างข้อความที่นี่... </p>
- < พรี คลาส= "prettyprint
- เส้น" >
- <p>ตัวอย่างข้อความที่นี่...</p>
- </pre>
ดาวน์โหลด google-code-prettifyและดูวิธีใช้งาน readme
แท็ก | คำอธิบาย |
---|---|
<table> |
การห่อองค์ประกอบสำหรับแสดงข้อมูลในรูปแบบตาราง |
<thead> |
องค์ประกอบคอนเทนเนอร์สำหรับแถวส่วนหัวของตาราง ( <tr> ) เพื่อติดป้ายกำกับคอลัมน์ตาราง |
<tbody> |
องค์ประกอบคอนเทนเนอร์สำหรับแถวตาราง ( <tr> ) ในเนื้อหาของตาราง |
<tr> |
องค์ประกอบคอนเทนเนอร์สำหรับชุดของเซลล์ตาราง ( <td> หรือ<th> ) ที่ปรากฏในแถวเดียว |
<td> |
เซลล์ตารางเริ่มต้น |
<th> |
เซลล์ตารางพิเศษสำหรับป้ายชื่อคอลัมน์ (หรือแถว ขึ้นอยู่กับขอบเขตและตำแหน่ง) ต้องใช้ภายใน a <thead> |
<caption> |
คำอธิบายหรือบทสรุปของสิ่งที่อยู่ในตาราง มีประโยชน์อย่างยิ่งสำหรับโปรแกรมอ่านหน้าจอ |
- <ตาราง>
- <หัว>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
ชื่อ | ระดับ | คำอธิบาย |
---|---|---|
ค่าเริ่มต้น | ไม่มี | ไม่มีสไตล์ มีแต่คอลัมน์และแถว |
ขั้นพื้นฐาน | .table |
เฉพาะเส้นแนวนอนระหว่างแถว |
ติดขอบ | .table-bordered |
ปัดเศษมุมและเพิ่มขอบด้านนอก |
ลายทางม้าลาย | .table-striped |
เพิ่มสีพื้นหลังสีเทาอ่อนให้กับแถวคี่ (1, 3, 5, ฯลฯ ) |
ย่อ | .table-condensed |
ลดช่องว่างภายในแนวตั้งลงครึ่งหนึ่งจาก 8px เป็น 4px ภายในทั้งหมดtd และth องค์ประกอบ |
ตารางจะถูกจัดรูปแบบโดยอัตโนมัติด้วยเส้นขอบเพียงไม่กี่เส้นเพื่อให้แน่ใจว่าสามารถอ่านได้และรักษาโครงสร้างไว้ ด้วย 2.0 .table
จำเป็นต้องมีคลาส
- <table class = "table" >
- …
- </table>
# | ชื่อจริง | นามสกุล | ภาษา |
---|---|---|---|
1 | เครื่องหมาย | อ็อตโต | CSS |
2 | เจคอบ | ธอร์นตัน | Javascript |
3 | สตู | บุ๋ม | HTML |
เพิ่มความเก๋ไก๋ให้กับโต๊ะของคุณด้วยการเพิ่มลายทางม้าลาย—เพียงเพิ่ม.table-striped
ชั้นเรียน
หมายเหตุ:ตาราง Sprite ใช้:nth-child
ตัวเลือก CSS และไม่มีให้ใน IE7-IE8
- <table class = "table table-striped" >
- …
- </table>
# | ชื่อจริง | นามสกุล | ภาษา |
---|---|---|---|
1 | เครื่องหมาย | อ็อตโต | CSS |
2 | เจคอบ | ธอร์นตัน | Javascript |
3 | สตู | บุ๋ม | HTML |
เพิ่มเส้นขอบรอบโต๊ะทั้งโต๊ะและมุมมนเพื่อความสวยงาม
- <table class = "table table-bordered" >
- …
- </table>
# | ชื่อจริง | นามสกุล | ภาษา |
---|---|---|---|
1 | มาร์ค ออตโต | CSS | |
2 | เจคอบ | ธอร์นตัน | Javascript |
3 | สตู | บุ๋ม | |
3 | Brosef | สตาลิน | HTML |
ทำให้ตารางของคุณกะทัดรัดยิ่งขึ้นด้วยการเพิ่ม.table-condensed
คลาสเพื่อตัดช่องว่างภายในเซลล์ของตารางลงครึ่งหนึ่ง (จาก 8px เป็น 4px)
- <table class = "table table-condensed" >
- …
- </table>
# | ชื่อจริง | นามสกุล | ภาษา |
---|---|---|---|
1 | เครื่องหมาย | อ็อตโต | CSS |
2 | เจคอบ | ธอร์นตัน | Javascript |
3 | สตู | บุ๋ม | HTML |
อย่าลังเลที่จะรวมคลาสตารางใดก็ได้เพื่อให้ได้รูปลักษณ์ที่แตกต่างกันโดยใช้คลาสที่มีอยู่
- <table class = "table table-striped table-bordered table-condensed" >
- ...
- </table>
# | ชื่อจริง | นามสกุล | ภาษา |
---|---|---|---|
1 | เครื่องหมาย | อ็อตโต | CSS |
2 | เจคอบ | ธอร์นตัน | Javascript |
3 | สตู | บุ๋ม | HTML |
4 | Brosef | สตาลิน | HTML |
ส่วนที่ดีที่สุดเกี่ยวกับแบบฟอร์มใน Bootstrap คืออินพุตและตัวควบคุมทั้งหมดของคุณดูดี ไม่ว่าคุณจะสร้างมันขึ้นมาในมาร์กอัปของคุณอย่างไร ไม่จำเป็นต้องใช้ HTML ที่ไม่จำเป็น แต่เราจัดเตรียมรูปแบบสำหรับผู้ที่ต้องการ
เลย์เอาต์ที่ซับซ้อนยิ่งขึ้นมาพร้อมกับคลาสที่กระชับและปรับขนาดได้สำหรับการจัดสไตล์ที่ง่ายดายและการรวมเหตุการณ์ ดังนั้นคุณจึงครอบคลุมในทุกขั้นตอน
Bootstrap มาพร้อมกับการรองรับเค้าโครงแบบฟอร์มสี่ประเภท:
เค้าโครงแบบฟอร์มประเภทต่างๆ ต้องการการเปลี่ยนแปลงบางอย่างในการมาร์กอัป แต่ตัวควบคุมจะยังคงเหมือนเดิมและทำงานเหมือนเดิม
แบบฟอร์มของ Bootstrap มีสไตล์สำหรับตัวควบคุมฟอร์มพื้นฐานทั้งหมด เช่น อินพุต พื้นที่ข้อความ และเลือกที่คุณคาดหวัง แต่ยังมาพร้อมกับส่วนประกอบที่กำหนดเองจำนวนหนึ่ง เช่น อินพุตที่ต่อท้ายและต่อท้าย และรองรับรายการช่องทำเครื่องหมาย
สถานะต่างๆ เช่น ข้อผิดพลาด คำเตือน และความสำเร็จรวมอยู่ในการควบคุมแบบฟอร์มแต่ละประเภท รวมถึงสไตล์สำหรับการควบคุมที่ปิดใช้งาน
Bootstrap จัดเตรียมมาร์กอัปและสไตล์อย่างง่ายสำหรับฟอร์มเว็บทั่วไปสี่สไตล์
ชื่อ | ระดับ | คำอธิบาย |
---|---|---|
แนวตั้ง (ค่าเริ่มต้น) | .form-vertical (ไม่จำเป็นต้องใช้) |
ป้ายกำกับที่เรียงซ้อนกันทางซ้ายเหนือตัวควบคุม |
อินไลน์ | .form-inline |
ป้ายกำกับที่จัดชิดซ้ายและตัวควบคุมแบบอินไลน์บล็อกสำหรับรูปแบบกะทัดรัด |
ค้นหา | .form-search |
การป้อนข้อความที่โค้งมนเป็นพิเศษเพื่อความสวยงามในการค้นหาทั่วไป |
แนวนอน | .form-horizontal |
ลอยป้ายกำกับชิดซ้ายและชิดขวาในบรรทัดเดียวกับตัวควบคุม |
ด้วย v2.0 เรามีค่าเริ่มต้นที่เบากว่าและชาญฉลาดกว่าสำหรับรูปแบบแบบฟอร์ม ไม่มีมาร์กอัปเพิ่มเติม เพียงควบคุมแบบฟอร์ม
สะท้อนสไตล์ WebKit เริ่มต้น เพียงเพิ่ม.form-search
สำหรับช่องค้นหาที่โค้งมนพิเศษ
อินพุตเป็นระดับบล็อกเพื่อเริ่มต้น สำหรับ.form-inline
และ.form-horizontal
เราใช้ inline-block
ทางด้านซ้ายคือตัวควบคุมแบบฟอร์มเริ่มต้นทั้งหมดที่เราสนับสนุน นี่คือรายการหัวข้อย่อย:
สไตล์ฟอร์มเริ่มต้นของ Bootstrap สูงถึง v1.4 ใช้เลย์เอาต์แนวนอน ด้วย Bootstrap 2 เราได้ลบข้อจำกัดนั้นเพื่อให้มีค่าเริ่มต้นที่ชาญฉลาดและปรับขนาดได้มากขึ้นสำหรับรูปแบบใดๆ
Bootstrap นำเสนอสไตล์สำหรับการเน้นและdisabled
สถานะ ที่รองรับเบราว์เซอร์ เราลบ Webkit เริ่มต้นoutline
และใช้ a box-shadow
แทนสำหรับ:focus
.
นอกจากนี้ยังมีรูปแบบการตรวจสอบข้อผิดพลาด คำเตือน และความสำเร็จอีกด้วย หากต้องการใช้ ให้เพิ่มคลาสข้อผิดพลาดให้กับไฟล์.control-group
.
- <fieldset
- class = "ข้อผิดพลาดของกลุ่มควบคุม" >
- …
- </fieldset>
กลุ่มอินพุตที่มีข้อความต่อท้ายหรือต่อท้าย ให้วิธีง่ายๆ ในการให้บริบทเพิ่มเติมสำหรับการป้อนข้อมูลของคุณ ตัวอย่างที่ดี ได้แก่ เครื่องหมาย @ สำหรับชื่อผู้ใช้ Twitter หรือ $ สำหรับการเงิน
Bootstrap ต้องใช้มาร์กอัปเพิ่มเติมในเวอร์ชัน 1.4 ขึ้นไปรอบๆ ช่องทำเครื่องหมายและวิทยุเพื่อสแต็ก ตอนนี้ เป็นเรื่องง่ายๆ ในการทำซ้ำ<label class="checkbox">
ที่ครอบ<input type="checkbox">
.
รองรับช่องทำเครื่องหมายและวิทยุแบบอินไลน์ เพียงแค่เพิ่ม.inline
ใด ๆ.checkbox
หรือ.radio
และคุณทำเสร็จแล้ว
หากต้องการใช้ส่วนเติมหน้าหรือต่อท้ายอินพุตในรูปแบบอินไลน์ ตรวจสอบให้แน่ใจว่าได้วาง.add-on
และinput
บนบรรทัดเดียวกันโดยไม่มีช่องว่าง
ในการเพิ่มข้อความช่วยเหลือสำหรับการป้อนแบบฟอร์มของคุณ ให้ใส่ข้อความช่วยเหลือแบบอินไลน์ด้วย<span class="help-inline">
หรือบล็อกข้อความช่วยเหลือด้วย<p class="help-block">
หลังองค์ประกอบอินพุต
:after
CSS ในเอกสาร เราจะแสดงสีพื้นหลังสีแดงอ่อนเมื่อวางเมาส์เหนือเพื่อไฮไลต์ขนาดของไอคอน
แทนที่จะทำให้ทุกไอคอนเป็นคำขอพิเศษ เราได้รวบรวมพวกมันเป็นสไปรท์—กลุ่มของรูปภาพในไฟล์เดียวที่ใช้ CSS เพื่อวางตำแหน่งรูปภาพด้วยbackground-position
. นี่เป็นวิธีเดียวกับที่เราใช้บน Twitter.com และได้ผลดีสำหรับเรา
คลาสไอคอนทั้งหมดถูกนำหน้าด้วย.icon-
เนมสเปซและการกำหนดขอบเขตที่เหมาะสม เช่นเดียวกับองค์ประกอบอื่นๆ ของเรา ซึ่งจะช่วยหลีกเลี่ยงความขัดแย้งกับเครื่องมืออื่นๆ
Glyphiconsอนุญาตให้เราใช้ชุด Halflings ในชุดเครื่องมือโอเพนซอร์สของเรา ตราบใดที่เราให้ลิงก์และเครดิตที่นี่ในเอกสาร โปรดพิจารณาทำเช่นเดียวกันในโครงการของคุณ
ด้วย v2.0.0 เราเลือกใช้<i>
แท็กสำหรับไอคอนทั้งหมดของเรา แต่ไม่มีคลาสเคส—เฉพาะคำนำหน้าที่ใช้ร่วมกันเท่านั้น ในการใช้งาน ให้วางรหัสต่อไปนี้ได้ทุกที่:
- <i class = "ไอคอนค้นหา" ></i>
นอกจากนี้ยังมีสไตล์สำหรับไอคอนกลับด้าน (สีขาว) ที่มาพร้อมคลาสพิเศษหนึ่งคลาส:
- <i class = "ไอคอนค้นหาไอคอนสีขาว" ></i>
มี 120 คลาสให้เลือกสำหรับไอคอนของคุณ เพียงเพิ่ม<i>
แท็กที่มีชั้นเรียนที่เหมาะสม เท่านี้คุณก็พร้อมแล้ว คุณสามารถค้นหารายการทั้งหมดได้ในsprites.lessหรือที่นี่ในเอกสารนี้
ไอคอนนั้นยอดเยี่ยม แต่จะใช้ที่ไหน นี่คือแนวคิดบางประการ:
โดยพื้นฐานแล้ว ทุกที่ที่คุณสามารถใส่<i>
แท็กได้ คุณสามารถใส่ไอคอนได้
ใช้ในปุ่ม กลุ่มปุ่มสำหรับแถบเครื่องมือ การนำทาง หรืออินพุตแบบฟอร์มที่เติมไว้ล่วงหน้า