มาตราส่วนการพิมพ์

ตารางการพิมพ์ทั้งหมดอ้างอิงจากตัวแปร 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 ยานพาหนะ

สำเนาเนื้อตะกั่ว

ทำให้ย่อหน้าโดดเด่นด้วยการ.leadเพิ่ม

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

ใช้การเน้น

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 ตัวอย่าง:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ชื่อ-นามสกุล
[email protected]

ตัวอย่างคำย่อ

คำย่อที่มีtitleแอตทริบิวต์จะมีเส้นขอบด้านล่างเป็นเส้นประสีอ่อนและเคอร์เซอร์ช่วยเมื่อวางเมาส์เหนือ สิ่งนี้ทำให้ผู้ใช้ระบุเพิ่มเติมว่าบางสิ่งจะแสดงเมื่อวางเมาส์เหนือ

เพิ่มinitialismชั้นเรียนลงในตัวย่อเพื่อเพิ่มความกลมกลืนของการพิมพ์โดยให้ขนาดตัวอักษรเล็กลงเล็กน้อย

HTMLเป็นสิ่งที่ดีที่สุดตั้งแต่หั่นขนมปัง

ตัวย่อของแอตทริบิวต์ word คือattr

หากต้องการรวม 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>

• ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
• Consectetur adipiscing elit
• จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
• สิ่งอำนวยความสะดวกใน pretium nisl aliquet
• นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ที่
• Faucibus porta lacus fringilla vel
• อิเนียนนั่งเอรัต erat nunc
• Eget porttitor lorem

ไม่มีสไตล์

<ul class="unstyled">

• ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
• Consectetur adipiscing elit
• จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
• สิ่งอำนวยความสะดวกใน pretium nisl aliquet
• นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat ที่
• Faucibus porta lacus fringilla vel
• อิเนียนนั่งเอรัต erat nunc
• Eget porttitor lorem

สั่งซื้อ

<ol>

1. ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
2. Consectetur adipiscing elit
3. จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
4. สิ่งอำนวยความสะดวกใน pretium nisl aliquet
5. นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
6. Faucibus porta lacus fringilla vel
7. อิเนียนนั่งเอรัต erat nunc
8. Eget porttitor lorem

คำอธิบาย

<dl>

รายการคำอธิบาย

รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข

อุยมอด

ขนถ่าย id ligula porta felis euismod semper eget lacinia odio sem nec elit

Donec id elit non mi porta gravida ที่ eget metus

Malesuada porta

Etiam porta sem malesuada magna มอลลิส euismod

คำอธิบายแนวนอน

<dl class="dl-horizontal">

รายการคำอธิบาย

รายการคำอธิบายเหมาะสำหรับการกำหนดเงื่อนไข

อุยมอด

ขนถ่าย id ligula porta felis euismod semper eget lacinia odio sem nec elit

Donec id elit non mi porta gravida ที่ eget metus

Malesuada porta

Etiam porta sem malesuada magna มอลลิส euismod

เฟลิส euismod semper eget lacinia

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo นั่ง amet risus

---

หัวขึ้น! text-overflowรายการคำอธิบายแนวนอนจะตัดคำที่ยาวเกินกว่าจะใส่ลงในคอลัมน์ ด้านซ้าย ในวิวพอร์ตที่แคบลง พวกเขาจะเปลี่ยนเป็นเลย์เอาต์แบบเรียงซ้อนเริ่มต้น

อินไลน์

ตัดข้อมูลโค้ดแบบอินไลน์ด้วย<code>.

ตัวอย่างเช่น<code> ส่วน< / code > ควรห่อเป็นแบบอินไลน์  

บล็อกพื้นฐาน

ใช้<pre>สำหรับโค้ดหลายบรรทัด อย่าลืมหลีกเลี่ยงวงเล็บเหลี่ยมในโค้ดเพื่อการเรนเดอร์ที่เหมาะสม

<p>ตัวอย่างข้อความที่นี่...</p>

<pre>
  <p>ตัวอย่างข้อความที่นี่...</p>
</pre>

หมายเหตุ:อย่าลืมเก็บโค้ดไว้ใน<pre>แท็กให้ชิดซ้ายมากที่สุด มันจะแสดงแท็บทั้งหมด

คุณสามารถเลือกเพิ่ม.pre-scrollableคลาสซึ่งจะตั้งค่าความสูงสูงสุด 350px และให้แถบเลื่อนแกน y

Google Prettify

ใช้<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>

ตารางจะถูกจัดรูปแบบโดยอัตโนมัติด้วยเส้นขอบเพียงไม่กี่เส้นเพื่อให้แน่ใจว่าสามารถอ่านได้และรักษาโครงสร้างไว้ ด้วย 2.0 .tableจำเป็นต้องมีคลาส

<table class = "table" > 
  …
</table>

#	ชื่อจริง	นามสกุล	ชื่อผู้ใช้
1	เครื่องหมาย	อ็อตโต	@mdo
2	เจคอบ	ธอร์นตัน	@อ้วน
3	แลร์รี่	นก	@ทวิตเตอร์

เพิ่มความเก๋ไก๋ให้กับโต๊ะของคุณด้วยการเพิ่มลายทางม้าลาย—เพียงเพิ่ม.table-stripedชั้นเรียน

หมายเหตุ:ตารางแบบสไทรพ์ใช้:nth-childตัวเลือก CSS และไม่มีให้ใน IE7-IE8

<table class = "table table-striped" > 
  …
</table>

#	ชื่อจริง	นามสกุล	ชื่อผู้ใช้
1	เครื่องหมาย	อ็อตโต	@mdo
2	เจคอบ	ธอร์นตัน	@อ้วน
3	แลร์รี่	นก	@ทวิตเตอร์

เพิ่มเส้นขอบรอบโต๊ะทั้งโต๊ะและมุมมนเพื่อความสวยงาม

<table class = "table table-bordered" > 
  …
</table>

#	ชื่อจริง	นามสกุล	ชื่อผู้ใช้
1	เครื่องหมาย	อ็อตโต	@mdo
	เครื่องหมาย	อ็อตโต	@getbootstrap
2	เจคอบ	ธอร์นตัน	@อ้วน
3	ลาร์รีเดอะเบิร์ด		@ทวิตเตอร์

ทำให้ตารางของคุณกะทัดรัดยิ่งขึ้นด้วยการเพิ่ม.table-condensedคลาสเพื่อตัดช่องว่างภายในเซลล์ของตารางลงครึ่งหนึ่ง (จาก 8px เป็น 4px)

<table class = "table table-condensed" > 
  …
</table>

#	ชื่อจริง	นามสกุล	ชื่อผู้ใช้
1	เครื่องหมาย	อ็อตโต	@mdo
2	เจคอบ	ธอร์นตัน	@อ้วน
3	ลาร์รีเดอะเบิร์ด		@ทวิตเตอร์

อย่าลังเลที่จะรวมคลาสตารางใดก็ได้เพื่อให้ได้รูปลักษณ์ที่แตกต่างกันโดยใช้คลาสที่มีอยู่

<table class = "table table-striped table-bordered table-condensed" > 
  ...
</table>

	ชื่อเต็ม
#	ชื่อจริง	นามสกุล	ชื่อผู้ใช้
1	เครื่องหมาย	อ็อตโต	@mdo
2	เจคอบ	ธอร์นตัน	@อ้วน
3	ลาร์รีเดอะเบิร์ด		@ทวิตเตอร์

HTML และ CSS ที่ยืดหยุ่น

ส่วนที่ดีที่สุดเกี่ยวกับแบบฟอร์มใน Bootstrap คืออินพุตและตัวควบคุมทั้งหมดของคุณดูดี ไม่ว่าคุณจะสร้างมันขึ้นมาในมาร์กอัปของคุณอย่างไร ไม่จำเป็นต้องใช้ HTML ที่ไม่จำเป็น แต่เราจัดเตรียมรูปแบบสำหรับผู้ที่ต้องการ

เลย์เอาต์ที่ซับซ้อนยิ่งขึ้นมาพร้อมกับคลาสที่กระชับและปรับขนาดได้สำหรับการจัดสไตล์ที่ง่ายดายและการรวมเหตุการณ์ ดังนั้นคุณจึงครอบคลุมในทุกขั้นตอน

รวมสี่เลย์เอาต์

Bootstrap มาพร้อมกับการรองรับเค้าโครงแบบฟอร์มสี่ประเภท:

• แนวตั้ง (ค่าเริ่มต้น)
• ค้นหา
• อินไลน์
• แนวนอน

เค้าโครงแบบฟอร์มประเภทต่างๆ ต้องการการเปลี่ยนแปลงบางอย่างในการมาร์กอัป แต่ตัวควบคุมจะยังคงเหมือนเดิมและทำงานเหมือนเดิม

สถานะการควบคุมและอื่น ๆ

แบบฟอร์มของ Bootstrap มีสไตล์สำหรับตัวควบคุมฟอร์มพื้นฐานทั้งหมด เช่น อินพุต พื้นที่ข้อความ และเลือกที่คุณคาดหวัง แต่ยังมาพร้อมกับส่วนประกอบที่กำหนดเองจำนวนหนึ่ง เช่น อินพุตที่ต่อท้ายและต่อท้าย และรองรับรายการช่องทำเครื่องหมาย

สถานะต่างๆ เช่น ข้อผิดพลาด คำเตือน และความสำเร็จรวมอยู่ในการควบคุมแบบฟอร์มแต่ละประเภท รวมถึงสไตล์สำหรับการควบคุมที่ปิดใช้งาน

แบบฟอร์มพื้นฐาน

ค่าเริ่มต้นที่ชาญฉลาดและมีน้ำหนักเบาโดยไม่มีมาร์กอัปเพิ่มเติม

ป้ายชื่อ

ตัวอย่างข้อความช่วยเหลือระดับบล็อกที่นี่

ตรวจสอบฉันออก ส่ง

<form class = "ดี" > 
  <label> ชื่อป้ายกำกับ</label>
  <input type = "text" class = "span3" placeholder = "พิมพ์อะไรบางอย่าง…" >   
  <span class = "help-block" > ตัวอย่างข้อความช่วยเหลือระดับบล็อกที่นี่ </span> 
  <label class = "ช่องทำเครื่องหมาย" > 
    <input type = "checkbox" > ลองดูสิ 
  </label>
  <button type = "submit" class = "btn" > ส่ง</button>  
</form>

แบบฟอร์มการค้นหา

เพิ่ม.form-searchลงในแบบฟอร์มและ.search-queryไปยังไฟล์input.

ค้นหา

<form class = "well form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > ค้นหา</button>  
</form>

แบบฟอร์มอินไลน์

เพิ่ม.form-inlineการจัดตำแหน่งแนวตั้งและระยะห่างของตัวควบคุมฟอร์ม

จดจำฉัน เข้าสู่ระบบ

<form class = "ดีแบบอินไลน์" > 
  <input type = "text" class = "input-small" placeholder = "อีเมล" >   
  <input type = "password" class = "input-small" placeholder = "รหัสผ่าน" >   
  <label class = "ช่องทำเครื่องหมาย" > 
    <input type = "checkbox" > จำฉันไว้ 
  </label>
  <button type = "submit" class = "btn" > ลงชื่อเข้าใช้ </button>  
</form>

ทางด้านขวาแสดงการควบคุมแบบฟอร์มเริ่มต้นทั้งหมดที่เราสนับสนุน นี่คือรายการหัวข้อย่อย:

• การป้อนข้อความ (ข้อความ รหัสผ่าน อีเมล ฯลฯ)
• ช่องทำเครื่องหมาย
• วิทยุ
• เลือก
• เลือกหลายรายการ
• ไฟล์อินพุต
• พื้นที่ข้อความ

ป้อนข้อความ

นอกเหนือจากข้อความรูปแบบอิสระ การป้อนข้อมูลแบบข้อความ HTML5 ใดๆ จะปรากฏขึ้นในลักษณะนี้

ช่องทำเครื่องหมาย

ทางเลือกที่หนึ่งคือสิ่งนี้และสิ่งนั้น—อย่าลืมใส่เหตุผลที่ยอดเยี่ยมด้วย

เลือกรายการ

บางสิ่งบางอย่าง 2 3 4 5

Multicon-เลือก

1 2 3 4 5

ไฟล์อินพุต

Textarea

บันทึกการเปลี่ยนแปลง ยกเลิก

ตัวอย่างมาร์กอัป

จากตัวอย่างเค้าโครงแบบฟอร์มด้านบน นี่คือมาร์กอัปที่เกี่ยวข้องกับอินพุตและกลุ่มควบคุมแรก ต้องใช้.control-group, .control-label, และ.controlsคลาสทั้งหมดสำหรับการจัดแต่งทรงผม

<form class = "รูปแบบแนวนอน" > 
  <fieldset>
    <ตำนาน> ข้อความในตำนาน</legend>
    < คลาสdiv = "กลุ่มควบคุม" > 
      <label class = "control-label" for = "input01" > ป้อนข้อความ</label>  
      < คลาสdiv = "ตัวควบคุม" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > รองรับข้อความช่วยเหลือ</p> 
      </div>
    </div>
  </fieldset>
</form>

Bootstrap นำเสนอสไตล์สำหรับการเน้นและdisabledสถานะ ที่รองรับเบราว์เซอร์ เราลบ Webkit เริ่มต้นoutlineและใช้ a box-shadowแทนสำหรับ:focus.

---

การตรวจสอบแบบฟอร์ม

นอกจากนี้ยังมีรูปแบบการตรวจสอบข้อผิดพลาด คำเตือน และความสำเร็จอีกด้วย หากต้องการใช้ ให้เพิ่มคลาสข้อผิดพลาดให้กับไฟล์.control-group.

<fieldset
  class = "ข้อผิดพลาดของกลุ่มควบคุม" >
  …
</fieldset>

อินพุตที่โฟกัส

อินพุตที่แก้ไขไม่ได้

ค่าบางอย่างที่นี่

อินพุตที่ปิดใช้งาน

ช่องทำเครื่องหมายปิดการใช้งาน

นี่คือช่องทำเครื่องหมายที่ปิดใช้งาน

อินพุตพร้อมคำเตือน

อาจมีบางอย่างผิดพลาด

อินพุตมีข้อผิดพลาด

โปรดแก้ไขข้อผิดพลาด

ป้อนข้อมูลด้วยความสำเร็จ

วู้ฮู!

เลือกอย่างประสบความสำเร็จ

1 2 3 4 5 วู้ฮู!

บันทึกการเปลี่ยนแปลง ยกเลิก

เติมและผนวกอินพุต

กลุ่มอินพุตที่มีข้อความต่อท้ายหรือต่อท้าย ให้วิธีง่ายๆ ในการให้บริบทเพิ่มเติมสำหรับการป้อนข้อมูลของคุณ ตัวอย่างที่ดี ได้แก่ เครื่องหมาย @ สำหรับชื่อผู้ใช้ Twitter หรือ $ สำหรับการเงิน

---

ช่องทำเครื่องหมายและวิทยุ

Bootstrap ต้องใช้มาร์กอัปเพิ่มเติมในเวอร์ชัน 1.4 ขึ้นไปรอบๆ ช่องทำเครื่องหมายและวิทยุเพื่อสแต็ก ตอนนี้ เป็นเรื่องง่ายๆ ในการทำซ้ำ<label class="checkbox">ที่ครอบ<input type="checkbox">.

รองรับช่องทำเครื่องหมายและวิทยุแบบอินไลน์ เพียงแค่เพิ่ม.inlineใด ๆ.checkboxหรือ.radioและคุณทำเสร็จแล้ว

---

แบบฟอร์มอินไลน์และต่อท้าย/เติมหน้า

หากต้องการใช้ส่วนเติมหน้าหรือต่อท้ายอินพุตในรูปแบบอินไลน์ ให้แน่ใจว่าได้วาง.add-onandinputบนบรรทัดเดียวกันโดยไม่มีช่องว่าง

---

แบบฟอร์มช่วยเหลือข้อความ

ในการเพิ่มข้อความช่วยเหลือสำหรับการป้อนแบบฟอร์มของคุณ ให้ใส่ข้อความช่วยเหลือแบบอินไลน์ด้วย<span class="help-inline">หรือบล็อกข้อความช่วยเหลือด้วย<p class="help-block">หลังองค์ประกอบอินพุต

ขนาดกริดแบบฟอร์ม

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

ใช้.span*คลาสเดียวกันจากระบบกริดสำหรับขนาดอินพุต

ขนาดอื่น

คุณยังสามารถใช้คลาสสแตติกที่ไม่ได้แมปกับกริด ปรับให้เข้ากับสไตล์ CSS ที่ตอบสนอง หรือพิจารณาการควบคุมประเภทต่างๆ (เช่นinputvs. select)

ข้อความนำหน้า

@

นี่คือข้อความช่วยเหลือ

ข้อความต่อท้าย

.00

นี่คือข้อความช่วยเหลือเพิ่มเติม

ต่อท้ายและต่อท้าย

$ .00

ต่อท้ายด้วยปุ่ม

ไป!

ต่อท้ายสองปุ่ม

ค้นหา ตัวเลือก

ช่องทำเครื่องหมายแบบอินไลน์

1 2 3

ช่องทำเครื่องหมาย

ทางเลือกที่หนึ่งคือสิ่งนี้และสิ่งนั้น—อย่าลืมใส่เหตุผลที่ยอดเยี่ยมด้วย สามารถตรวจสอบตัวเลือกที่สองและรวมไว้ในผลลัพธ์ของแบบฟอร์มได้ ตัวเลือกที่สามสามารถ—ใช่ คุณเดาได้—ตรวจสอบและรวมไว้ในผลลัพธ์ของแบบฟอร์มด้วย

หมายเหตุ:ป้ายกำกับล้อมรอบตัวเลือกทั้งหมดสำหรับพื้นที่การคลิกที่ใหญ่ขึ้นและรูปแบบที่ใช้งานได้มากขึ้น

ปุ่มตัวเลือก

ทางเลือกที่หนึ่งคือสิ่งนี้และสิ่งนั้น—อย่าลืมใส่เหตุผลที่ยอดเยี่ยมด้วย ตัวเลือกที่สองสามารถเป็นอย่างอื่นได้และการเลือกตัวเลือกนี้จะยกเลิกการเลือกตัวเลือกที่หนึ่ง

บันทึกการเปลี่ยนแปลง ยกเลิก

ปุ่มสำหรับการดำเนินการ

ตามแบบแผน ควรใช้ปุ่มสำหรับการดำเนินการเท่านั้นในขณะที่ใช้ไฮเปอร์ลิงก์สำหรับออบเจ็กต์ ตัวอย่างเช่น "ดาวน์โหลด" ควรเป็นปุ่ม ขณะที่ "กิจกรรมล่าสุด" ควรเป็นลิงก์

สไตล์ปุ่มสามารถนำไปใช้กับอะไรก็ได้ที่มี.btnคลาสที่ใช้ อย่างไรก็ตาม โดยทั่วไป คุณจะต้องใช้สิ่งเหล่านี้กับ<a>และ .เท่านั้น<button>องค์ประกอบ

ความเข้ากันได้ข้ามเบราว์เซอร์

IE9 จะไม่ครอบตัดการไล่ระดับสีพื้นหลังที่มุมมน ดังนั้นเราจึงลบออก ที่เกี่ยวข้อง IE9 ทำลายbuttonองค์ประกอบที่ถูกปิดใช้งาน ทำให้ข้อความเป็นสีเทาด้วยเงาข้อความที่น่ารังเกียจซึ่งเราไม่สามารถแก้ไขได้

หลายขนาด

แฟนซีปุ่มขนาดใหญ่หรือเล็ก? เพิ่ม.btn-large, .btn-smallหรือ.btn-miniสำหรับสองขนาดเพิ่มเติม

การดำเนินการหลัก การกระทำ

การดำเนินการหลัก การกระทำ

การดำเนินการหลัก การกระทำ

สถานะคนพิการ

สำหรับปุ่มที่ปิดใช้งาน ให้เพิ่ม.disabledคลาสในลิงก์และdisabledแอตทริบิวต์สำหรับ<button>องค์ประกอบ

ลิงค์หลัก ลิงค์

ปุ่มหลัก ปุ่ม

หัวขึ้น! เราใช้.disabledเป็นคลาสยูทิลิตี้ที่นี่ คล้ายกับ.activeคลาสทั่วไป ดังนั้นจึงไม่จำเป็นต้องมีคำนำหน้า

หนึ่งคลาส หลายแท็ก

ใช้.btnคลาสบนองค์ประกอบ<a>, <button>, หรือ<input>

ลิงค์ ปุ่ม

<a class = "btn" href = "" > ลิงก์</a>  
<button class = "btn" type = "submit" >  
  ปุ่ม
</button>
< คลาสอินพุต= "btn" ประเภท= "ปุ่ม"  
         ค่า= "อินพุต" >
<input class = "btn" type = "submit"  
         ค่า= "ส่ง" >

ตามแนวทางปฏิบัติที่ดีที่สุด พยายามจับคู่องค์ประกอบสำหรับบริบทของคุณเพื่อให้แน่ใจว่ามีการแสดงผลข้ามเบราว์เซอร์ที่ตรงกัน หากคุณมี ให้inputใช้ an <input type="submit">สำหรับปุ่มของคุณ

• ไอคอนแก้ว
• ไอคอนเพลง
• ไอคอนค้นหา
• ไอคอนซองจดหมาย
• ไอคอนหัวใจ
• ไอคอนดาว
• ไอคอนดาวว่างเปล่า
• ไอคอนผู้ใช้
• ไอคอนฟิล์ม
• ไอคอนขนาดใหญ่
• icon-th
• icon-th-list
• ไอคอนโอเค
• ไอคอนลบ
• ไอคอนซูมเข้า
• ไอคอนซูมออก
• ไอคอนปิด
• ไอคอนสัญญาณ
• ไอคอนฟันเฟือง
• ไอคอนถังขยะ
• ไอคอนบ้าน
• ไอคอนไฟล์
• ไอคอนเวลา
• ไอคอนถนน
• icon-download-alt
• ไอคอนดาวน์โหลด
• ไอคอนอัพโหลด
• ไอคอนกล่องจดหมาย
• ไอคอนเล่นวงกลม
• ไอคอนซ้ำ
• ไอคอนรีเฟรช
• icon-list-alt
• ไอคอนล็อค
• ไอคอนธง
• ไอคอนหูฟัง

• ไอคอนระดับเสียงปิด
• ไอคอนลดระดับเสียง
• ไอคอนเพิ่มระดับเสียง
• icon-qrcode
• ไอคอนบาร์โค้ด
• ไอคอนแท็ก
• ไอคอนแท็ก
• ไอคอนหนังสือ
• ไอคอนบุ๊คมาร์ค
• ไอคอนพิมพ์
• ไอคอนกล้อง
• ไอคอนแบบอักษร
• ไอคอนตัวหนา
• ไอคอนตัวเอียง
• ไอคอนข้อความความสูง
• icon-text-width
• icon-align-left
• icon-align-center
• icon-align-right
• icon-align-justify
• รายการไอคอน
• icon-เยื้องซ้าย
• icon-เยื้องขวา
• icon-facetime-วิดีโอ
• ไอคอนรูปภาพ
• ไอคอนดินสอ
• ไอคอนแผนที่เครื่องหมาย
• ไอคอนปรับ
• ไอคอนสี
• ไอคอนแก้ไข
• ไอคอนแชร์
• ไอคอนตรวจสอบ
• ไอคอนย้าย
• ไอคอนก้าวถอยหลัง
• icon-fast-backward

• ไอคอนย้อนกลับ
• ไอคอนเล่น
• ไอคอนหยุดชั่วคราว
• ไอคอนหยุด
• ไอคอนไปข้างหน้า
• icon-fast-forward
• ไอคอนก้าวไปข้างหน้า
• ไอคอนนำออก
• icon-chevron-left
• ไอคอนเชฟรอนขวา
• ไอคอนบวกเครื่องหมาย
• ไอคอนเครื่องหมายลบ
• icon-remove-เครื่องหมาย
• icon-ok-สัญญาณ
• ไอคอนคำถามเครื่องหมาย
• icon-info-sign
• ไอคอนภาพหน้าจอ
• ไอคอนลบวงกลม
• icon-ok-วงกลม
• ไอคอนแบนวงกลม
• ไอคอนลูกศรซ้าย
• ไอคอนลูกศรขวา
• ไอคอนลูกศรขึ้น
• ไอคอนลูกศรลง
• icon-share-alt
• icon-resize-full
• icon-resize-small
• ไอคอนบวก
• ไอคอนลบ
• ไอคอนเครื่องหมายดอกจัน
• icon-exclamation-sign
• ไอคอนของขวัญ
• ไอคอนใบไม้
• ไอคอนไฟ
• ไอคอนตาเปิด

• ไอคอนตาปิด
• ไอคอนคำเตือนป้าย
• ไอคอนเครื่องบิน
• ไอคอนปฏิทิน
• ไอคอนสุ่ม
• ไอคอนความคิดเห็น
• ไอคอนแม่เหล็ก
• icon-chevron-up
• icon-chevron-down
• icon-retweet
• icon-shopping-cart
• ไอคอนโฟลเดอร์ปิด
• ไอคอนโฟลเดอร์เปิด
• icon-resize-vertical
• ไอคอนปรับขนาดแนวนอน
• icon-hdd
• icon-bulhorn
• ไอคอนระฆัง
• ไอคอนใบรับรอง
• ไอคอน-ยกนิ้วให้
• icon-thumbs-down
• ไอคอน-มือ-ขวา
• ไอคอนมือซ้าย
• ไอคอนยกมือ
• ไอคอนมือลง
• ไอคอนวงกลมลูกศรขวา
• ไอคอนวงกลมลูกศรซ้าย
• ไอคอนวงกลมลูกศรขึ้น
• ไอคอนวงกลมลูกศรลง
• ไอคอนลูกโลก
• ไอคอนประแจ
• ไอคอนงาน
• ไอคอนตัวกรอง
• ไอคอนกระเป๋าเอกสาร
• icon-fullscreen

สร้างเป็นสไปรท์

แทนที่จะทำให้ทุกไอคอนเป็นคำขอพิเศษ เราได้รวบรวมพวกมันเป็นสไปรท์—กลุ่มของรูปภาพในไฟล์เดียวที่ใช้ CSS เพื่อวางตำแหน่งรูปภาพด้วยbackground-position. นี่เป็นวิธีเดียวกับที่เราใช้บน Twitter.com และได้ผลดีสำหรับเรา

คลาสไอคอนทั้งหมดถูกนำหน้าด้วย.icon-เนมสเปซและการกำหนดขอบเขตที่เหมาะสม เช่นเดียวกับองค์ประกอบอื่นๆ ของเรา ซึ่งจะช่วยหลีกเลี่ยงความขัดแย้งกับเครื่องมืออื่นๆ

Glyphiconsอนุญาตให้เราใช้ชุด Halflings ในชุดเครื่องมือโอเพนซอร์สของเรา ตราบใดที่เราให้ลิงก์และเครดิตที่นี่ในเอกสาร โปรดพิจารณาทำเช่นเดียวกันในโครงการของคุณ

วิธีใช้

Bootstrap ใช้<i>แท็กสำหรับไอคอนทั้งหมด แต่ไม่มีคลาสเคส—เฉพาะคำนำหน้าที่ใช้ร่วมกัน ในการใช้งาน ให้วางรหัสต่อไปนี้ได้ทุกที่:

<i class = "ไอคอนค้นหา" ></i> 

นอกจากนี้ยังมีสไตล์สำหรับไอคอนกลับหัว (สีขาว) ที่มาพร้อมคลาสพิเศษหนึ่งคลาส:

<i class = "ไอคอนค้นหาไอคอนสีขาว" ></i> 

มี 140 คลาสให้เลือกสำหรับไอคอนของคุณ เพียงเพิ่ม<i>แท็กที่มีชั้นเรียนที่เหมาะสม เท่านี้คุณก็พร้อมแล้ว คุณสามารถค้นหารายการทั้งหมดได้ในsprites.lessหรือที่นี่ในเอกสารนี้

หัวขึ้น! เมื่อใช้ข้างสตริงข้อความ เช่นเดียวกับในปุ่มหรือลิงก์นำทาง อย่าลืมเว้นวรรคหลัง<i>แท็กเพื่อให้มีระยะห่างที่เหมาะสม

กรณีการใช้งาน

ไอคอนนั้นยอดเยี่ยม แต่จะใช้ที่ไหน นี่คือแนวคิดบางประการ:

• เป็นภาพสำหรับการนำทางแถบด้านข้างของคุณ
• สำหรับการนำทางที่ขับเคลื่อนด้วยไอคอนล้วนๆ
• สำหรับปุ่มที่ช่วยถ่ายทอดความหมายของการกระทำ
• พร้อมลิงค์สำหรับแชร์บริบทปลายทางของผู้ใช้

โดยพื้นฐานแล้ว ทุกที่ที่คุณสามารถใส่<i>แท็กได้ คุณสามารถใส่ไอคอนได้

รีเฟรช เช็คเอาท์ ลบ

ความคิดเห็น การตั้งค่า ข้อมูลเพิ่มเติม

ที่อยู่อีเมล