Bootstrap จาก Twitter

Bootstrap เป็นชุดเครื่องมือจาก Twitter ที่ออกแบบมาเพื่อเริ่มต้นการพัฒนาเว็บแอพและเว็บไซต์
ประกอบด้วย CSS และ HTML พื้นฐานสำหรับการพิมพ์ แบบฟอร์ม ปุ่ม ตาราง กริด การนำทาง และอื่นๆ

การแจ้งเตือนแบบเนิร์ด: Bootstrap สร้างขึ้นด้วย Lessและได้รับการออกแบบมาให้ทำงานนอกเกตโดยคำนึงถึงเบราว์เซอร์ที่ทันสมัย

Hotlink ที่ CSS

เพื่อการเริ่มต้นที่รวดเร็วและง่ายที่สุด เพียงคัดลอกข้อมูลโค้ดนี้ลงในหน้าเว็บของคุณ

ใช้กับ Less

แฟนของการใช้ Less? ไม่มีปัญหา เพียงโคลน repo และเพิ่มบรรทัดเหล่านี้:

แยกบน GitHub

ดาวน์โหลด แยก ดึง ปัญหาไฟล์ และอื่นๆ ด้วย Bootstrap repo อย่างเป็นทางการบน Github

Bootstrap บน GitHub »

ประวัติศาสตร์

ในยุคก่อนหน้าของ Twitter วิศวกรใช้ไลบรารีเกือบทั้งหมดที่พวกเขาคุ้นเคยเพื่อตอบสนองความต้องการส่วนหน้า Bootstrap เริ่มต้นจากการตอบสนองต่อความท้าทายที่นำเสนอและการพัฒนาอย่างรวดเร็วในช่วง Hackweek แรกของ Twitter

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

อ่านเพิ่มเติมเกี่ยวกับdev.twitter.com ›

รองรับเบราว์เซอร์

Bootstrap ได้รับการทดสอบและสนับสนุนในเบราว์เซอร์สมัยใหม่ที่สำคัญเช่น Chrome, Safari, Internet Explorer และ Firefox

Safari ล่าสุด
Google Chrome ล่าสุด
Firefox 4+
Internet Explorer 7+
Opera 11

รวมอะไรบ้าง

Bootstrap มาพร้อมกับ CSS ที่คอมไพล์แล้ว คอมไพล์แล้ว และเทมเพลตตัวอย่าง

ไฟล์ .less ดั้งเดิมทั้งหมด
CSS . ที่คอมไพล์แล้วและย่อให้เล็กสุด
เอกสารคู่มือสไตล์ฉบับสมบูรณ์
เทมเพลตหน้าตัวอย่าง (เพิ่มเติมเร็วๆ นี้)

ตารางเริ่มต้น

ระบบกริดเริ่มต้นที่ให้ไว้เป็นส่วนหนึ่งของ Bootstrap คือกริด 16 คอลัมน์กว้าง 940px มันเป็นรสชาติของระบบกริด 960 ยอดนิยม แต่ไม่มีขอบ / ช่องว่างภายในเพิ่มเติมที่ด้านซ้ายและด้านขวา

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

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

< คลาสdiv = "แถว" > 
  <div class = "span6 คอลัมน์" > 
    ...
  </div>
  <div class = "span10 คอลัมน์" > 
    ...
  </div>
</div>

คอลัมน์ออฟเซ็ต

8 ออฟเซ็ต 4

4 ออฟเซ็ต 4

5 ออฟเซ็ต 3

10 ออฟเซ็ต 6

เค้าโครงคงที่

เลย์เอาต์กึ่งกลางกว้าง 940px ที่เป็นค่าเริ่มต้นและเรียบง่ายสำหรับเว็บไซต์หรือหน้าเว็บใดๆ ที่จัดทำโดยไฟล์<div.container>.

<body>
  < คลาสdiv = "คอนเทนเนอร์" > 
    ...
  </div>
</body>

เลย์เอาต์ของไหล

โครงสร้างหน้าแบบไหลทางเลือกที่ยืดหยุ่นพร้อมความกว้างต่ำสุดและสูงสุด และแถบด้านข้างทางซ้ายมือ เหมาะสำหรับแอปและเอกสาร

<body>
  <div class = "container-fluid" > 
    < คลาสdiv = "แถบด้านข้าง" > 
      ...
    </div>
    <div class = "เนื้อหา" > 
      ...
    </div>
  </div>
</body>

หัวเรื่อง & สำเนา

ลำดับชั้นการพิมพ์มาตรฐานสำหรับการจัดโครงสร้างหน้าเว็บของคุณ

ตารางการพิมพ์ทั้งหมดขึ้นอยู่กับตัวแปร Less สองตัวในไฟล์ preboot.less ของเรา: @basefontและ@baseline. อันแรกคือขนาดฟอนต์พื้นฐานที่ใช้ตลอด และอันที่สองคือความสูงของบรรทัดฐาน

เราใช้ตัวแปรเหล่านั้น และคณิตศาสตร์บางส่วน เพื่อสร้างระยะขอบ ช่องว่างภายใน และความสูงของเส้นทุกประเภทของเราและอีกมากมาย

ชั่วโมง1. หัวเรื่อง 1

ชั่วโมง2. หัวเรื่อง 2

ชั่วโมง3. หัวเรื่อง 3

ชั่วโมง4. หัวเรื่อง 4

h5. หัวเรื่อง 5

h6. หัวเรื่อง 6

ย่อหน้าตัวอย่าง

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

ตัวอย่างหัวเรื่องมีหัวเรื่องย่อย…

อื่น ๆ. องค์ประกอบ

การใช้การเน้น ที่อยู่ และตัวย่อ

<strong> <em> <address> <abbr>

เมื่อใดควรใช้

แท็กเน้น ( <strong>และ<em>) ควรใช้เพื่อระบุความสำคัญเพิ่มเติมหรือเน้นคำหรือวลีที่สัมพันธ์กับสำเนาโดยรอบ ใช้สำหรับ<strong>ความสำคัญและเน้นความเครียด<em>

เน้นในย่อหน้า

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>นี้ใช้สำหรับข้อมูลการติดต่อของบรรพบุรุษที่ใกล้ที่สุดหรือทั้งงาน นี่คือลักษณะ:

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

หมายเหตุ:แต่ละบรรทัดใน a <address>ต้องลงท้ายด้วยตัวแบ่งบรรทัด ( <br />) หรือห่อด้วยแท็กระดับบล็อก (เช่น<p>) เพื่อจัดโครงสร้างเนื้อหาอย่างเหมาะสม

ตัวย่อ

สำหรับตัวย่อและตัวย่อ ให้ใช้<abbr>แท็ก ( <acronym>เลิกใช้แล้วในHTML5 ) ใส่แบบฟอร์มชวเลขภายในแท็กและตั้งชื่อสำหรับชื่อเต็ม

Blockquotes

<blockquote> <p> <small>

วิธีอ้าง

<blockquote>หากต้องการใส่ blockquote ให้ห่อ<p>และ<small>แท็ก ใช้<small>องค์ประกอบเพื่ออ้างอิงแหล่งที่มาของคุณและคุณจะได้รับ em dash —ก่อนหน้านั้น

Lorem ipsum dolor sit amet, consectetur adipiscing elit. โลเรม อิปซัม โดลอร์ จำนวนเต็ม posuere erat ante venenatis dapibus posuere velit aliquet
ดร.จูเลียส ฮิบเบิร์ต

รายการ

ไม่เรียงลำดับ`<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.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>`

ลอเรม อิปซัม ดอเลอร์ ซิท เอเม็ท
Consectetur adipiscing elit
จำนวนเต็ม โมเลสตี้ โลเร็ม ที่ มาสสา
สิ่งอำนวยความสะดวกใน pretium nisl aliquet
นุลลา โวลุตพัฒน์ อะลิควัม เวลิต
Faucibus porta lacus fringilla vel
อิเนียนนั่งเอรัต erat nunc
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

สร้างโต๊ะ

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

ตารางดีมาก—สำหรับหลายสิ่งหลายอย่าง อย่างไรก็ตาม ตารางที่ยอดเยี่ยมนั้นต้องการมาร์กอัปเล็กน้อยจึงจะมีประโยชน์ ปรับขนาดได้ และสามารถอ่านได้ (ที่ระดับโค้ด) ต่อไปนี้คือเคล็ดลับเล็กๆ น้อยๆ ที่จะช่วยคุณได้

ล้อมส่วนหัวคอลัมน์ของคุณใน<thead>ลำดับชั้นเสมอ<thead>> <tr>><th>

เช่นเดียวกับส่วนหัวของคอลัมน์ เนื้อหาเนื้อหาของตารางทั้งหมดควรถูกห่อด้วย a <tbody>เพื่อให้ลำดับชั้นของคุณเป็น<tbody>> <tr>><td>

ตัวอย่าง: สไตล์ตารางเริ่มต้น

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

#	ชื่อจริง	นามสกุล	ภาษา
1	บาง	หนึ่ง	ภาษาอังกฤษ
2	โจ	กล้ามเนื้อหน้าท้องที่เป็นลอน	ภาษาอังกฤษ
3	สตู	บุ๋ม	รหัส

<ตาราง>
  ...
</table>

ตัวอย่าง: ลายทางม้าลาย

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

#	ชื่อจริง	นามสกุล	ภาษา
1	บาง	หนึ่ง	ภาษาอังกฤษ
2	โจ	กล้ามเนื้อหน้าท้องที่เป็นลอน	ภาษาอังกฤษ
3	สตู	บุ๋ม	รหัส

หมายเหตุ: Zebra-striping เป็นการปรับปรุงแบบก้าวหน้าที่ไม่มีในเบราว์เซอร์รุ่นเก่า เช่น IE8 หรือต่ำกว่า

<table class = "ลายทางม้าลาย" > 
...
</table>

ตัวอย่าง: ลายทางม้าลาย w/ TableSorter.js

จากตัวอย่างก่อนหน้านี้ เราปรับปรุงประโยชน์ของตารางของเราโดยจัดเตรียมฟังก์ชันการเรียงลำดับผ่านjQueryและปลั๊กอินTablesorter คลิกส่วนหัวของคอลัมน์ใดก็ได้เพื่อเปลี่ยนการจัดเรียง

#	ชื่อจริง	นามสกุล	ภาษา
1	ของคุณ	หนึ่ง	ภาษาอังกฤษ
2	โจ	กล้ามเนื้อหน้าท้องที่เป็นลอน	ภาษาอังกฤษ
3	สตู	บุ๋ม	รหัส

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( ฟังก์ชัน() { 
    $ ( "table#sortTableExample" ) tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "ลายทางม้าลาย" > 
  ...
</table>

แถบด้านบนคงที่

มันคืออะไร

แถบด้านบนของเราเป็นแถบคงที่ซึ่งมีโลโก้หรือชื่อของเว็บไซต์ การนำทางหลัก และแบบฟอร์มการค้นหา

ปรับแต่งได้

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

รวมรายการแบบเลื่อนลง

ในส่วนของการนำทางหลัก เราได้รวมความสามารถในการเพิ่มดรอปดาวน์ลงในการนำทางของคุณ ตรวจสอบการนำทางรองด้านบน (จัดชิดขวา) เพื่อดูว่าดำเนินการอย่างไร

หมายเหตุ:เมื่อใช้แถบด้านบนในหน้าใดๆ อย่าลืมพิจารณาการทับซ้อนที่เกิดจากการเพิ่มpadding-top: 40px;ลงในbodyไฟล์ .

แท็บและยาเม็ด

สร้างการนำทางรองอย่างง่ายด้วยไฟล์<ul>. สลับระหว่างแท็บหรือยาเม็ดโดยเพิ่มคลาสที่เหมาะสม

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

<ul class = "แท็บ" > 
  <li class = "active" ><a href = "#" > หน้าแรก</a></li>  
  <li><a href = "#" > โปรไฟล์</a></li> 
  <li><a href = "#" > ข้อความ</a></li> 
  <li><a href = "#" > การตั้งค่า</a></li> 
  <li><a href = "#" > ติดต่อ</a></li> 
</ul>

<ul class = "ยา" > 
  <li class = "active" ><a href = "#" > หน้าแรก</a></li>  
  <li><a href = "#" > โปรไฟล์</a></li> 
  <li><a href = "#" > ข้อความ</a></li> 
  <li><a href = "#" > การตั้งค่า</a></li> 
  <li><a href = "#" > ติดต่อ</a></li> 
</ul>

การแบ่งหน้า

การแบ่งหน้าแบบเรียบง่ายและมีสไตล์น้อยที่สุดได้รับแรงบันดาลใจจาก Rdio บล็อกขนาดใหญ่นั้นยากที่จะพลาด ปรับขนาดได้ง่าย และมีพื้นที่การคลิกขนาดใหญ่

< คลาสdiv = "การแบ่งหน้า" > 
  <ul>
    <li class = "ก่อนหน้าถูกปิดใช้งาน" ><a href = "#" > ← ก่อนหน้า</a></li>  
    <li class = "ใช้งานอยู่" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

การแจ้งเตือนพื้นฐาน

div.alert-message

ข้อความบรรทัดเดียวสำหรับเน้นความล้มเหลว ความล้มเหลวที่อาจเกิดขึ้น หรือความสำเร็จของการดำเนินการ มีประโยชน์อย่างยิ่งสำหรับแบบฟอร์ม

เกาคาโมเล่ศักดิ์สิทธิ์! เช็คตัวเองให้ดีที่สุด คุณไม่ได้ดูดีเกินไป

อื้อหือ! เปลี่ยนสิ่งนี้และสิ่งนั้นแล้วลองอีกครั้ง

ทำได้ดี! คุณอ่านข้อความแจ้งเตือนนี้สำเร็จแล้ว

หัวขึ้น! นี่เป็นการแจ้งเตือนที่ต้องการความสนใจจากคุณ แต่ยังไม่มีความสำคัญมากนัก

บล็อกข้อความ

div.alert-message.block-message

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

เกาคาโมเล่ศักดิ์สิทธิ์! นี่คือคำเตือน! เช็คตัวเองให้ดีที่สุด คุณไม่ได้ดูดีเกินไป Nulla vitae elit libero, pharetra augue. ส่ง commodo cursus magna, vel scelerisque nisl consectetur et.

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้

อื้อหือ! คุณมีข้อผิดพลาด! เปลี่ยนสิ่งนี้และสิ่งนั้นแล้วลองอีกครั้ง Duis mollis, est ไม่ใช่ commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit Cras mattis consectetur purus นั่ง amet fermentum.

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้

ทำได้ดี! คุณอ่านข้อความแจ้งเตือนนี้สำเร็จแล้ว Cum sociis natoque penatibus และ magnis dis parturient montes, nascetur ridiculus mus. เมซีนาส เฟาซิบัส มอลลิส อินเตอร์ดัม

ลงมือทำสิ่งนี้ หรือทำสิ่งนี้

Modals

โมดอล—กล่องโต้ตอบหรือไลท์บ็อกซ์—เหมาะอย่างยิ่งสำหรับการดำเนินการตามบริบทในสถานการณ์ที่จำเป็นต้องรักษาบริบทพื้นหลังไว้

เคล็ดลับเครื่องมือ

Twipsies มีประโยชน์มากในการช่วยผู้ใช้ที่สับสนและชี้ไปในทิศทางที่ถูกต้อง

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, ที่จริงแล้ว illo voluptatem ออกจาก perspiciatis laudantium rem doloremque ถึง voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit diabetesantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae diabetesantium fugit voluptas ne quasi fugit voluptas อะ

ด้านล่าง!

ขวา!

ซ้าย!

ข้างบน!

ป๊อปโอเวอร์

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

Bootstrap ถูกสร้างขึ้นด้วยPrebootซึ่งเป็นแพ็คโอเพ่นซอร์สของมิกซ์อินและตัวแปรที่จะใช้ร่วมกับLessซึ่งเป็นตัวประมวลผลล่วงหน้าของ CSS เพื่อการพัฒนาเว็บที่รวดเร็วและง่ายขึ้น

ตรวจสอบวิธีที่เราใช้ Preboot ใน Bootstrap และวิธีใช้งานหากคุณเลือกที่จะเรียกใช้ Less ในโครงการถัดไปของคุณ

วิธีใช้งาน

ใช้ตัวเลือกนี้เพื่อใช้ประโยชน์จากตัวแปร Less, มิกซ์อิน และการซ้อนใน CSS ของ Bootstrap อย่างเต็มที่ผ่านจาวาสคริปต์ในเบราว์เซอร์ของคุณ

<link rel = "stylesheet/less" href = "less/bootstrap.less" สื่อ= "ทั้งหมด" />    
<script src = "js/less-1.1.3.min.js" ></script>

ไม่รู้สึกวิธีแก้ปัญหา .js ใช่ไหม ลองใช้แอพ Less Macหรือใช้ Node.jsเพื่อคอมไพล์เมื่อคุณปรับใช้โค้ดของคุณ

รวมอะไรบ้าง

นี่คือไฮไลท์บางส่วนของสิ่งที่รวมอยู่ใน Twitter Bootstrap ซึ่งเป็นส่วนหนึ่งของ Bootstrap ตรงไปที่เว็บไซต์ Bootstrap หรือหน้าโครงการ Github เพื่อดาวน์โหลดและเรียนรู้เพิ่มเติม

ตัวแปร

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

// ลิงค์
@linkColor : #8b59c2;         
@linkColorHover :     ทำให้เข้ม ขึ้น ( @linkColor , 10 ); 
 
// เกรย์ส
@ดำ: #000;             
@grayDark :           สว่าง ขึ้น ( @black , 25 % %); 
@gray :               สว่าง ขึ้น ( @black , 50 % %); 
@grayLight :          ทำให้สว่าง ขึ้น ( @black , 70 % %); 
@grayLighter :        ทำให้สว่าง ขึ้น ( @black , 90 % %); 
@ขาว : #ffff ;             
 
// เน้นสี
@ฟ้า : # 08b5fb ;              
@กรีน : # 46a546 ;             
@แดง : # 9d261d ;               
@เหลือง : # ffc40d ;            
@สีส้ม : # f89406 ;            
@สีชมพู : # c3325f ;              
@สีม่วง : # 7a43b6 ;            
 
// ตารางพื้นฐาน
@basefont : 13px ;          
@baseline : 18px ;

แสดงความคิดเห็น

Less ยังให้รูปแบบการแสดงความคิดเห็นอื่นนอกเหนือจาก/* ... */ไวยากรณ์ ปกติของ CSS

// นี่คือความคิดเห็น
/* นี่คือความคิดเห็น */

ผสม wazoo ขึ้น

โดยทั่วไปแล้ว Mixins จะรวมหรือบางส่วนสำหรับ CSS ทำให้คุณสามารถรวมบล็อกของโค้ดเป็นหนึ่งเดียว เหมาะสำหรับคุณสมบัตินำหน้าผู้ขาย เช่นbox-shadowการไล่ระดับสีข้ามเบราว์เซอร์ กองแบบอักษร และอื่นๆ ด้านล่างนี้คือตัวอย่างมิกซ์อินที่มาพร้อมกับ Bootstrap

กองแบบอักษร

#แบบอักษร{
  . ชวเลข( @weight : ปกติ, @size : 14px , @lineHeight : 20px ) {     
    แบบอักษร- ขนาด: @size ; 
    แบบอักษร- น้ำหนัก: @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @weight : ปกติ, @size : 14px , @lineHeight : 20px ) {     
    แบบอักษร- ตระกูล: "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    แบบอักษร- ขนาด: @size ; 
    แบบอักษร- น้ำหนัก: @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @weight : ปกติ, @size : 14px , @lineHeight : 20px ) {     
    ฟอนต์- แฟมิ ลี่: "จอร์เจีย" , Times New Roman , Times , sans - serif ;     
    แบบอักษร- ขนาด: @size ; 
    แบบอักษร- น้ำหนัก: @weight ; 
    line - height : @lineHeight ; 
  }
  . โมโน สเปซ( @weight : ปกติ, @size : 12px , @lineHeight : 20px ) {     
    font - family : "โมนาโก" , Courier New , monospace ;   
    แบบอักษร- ขนาด: @size ; 
    แบบอักษร- น้ำหนัก: @weight ; 
    line - height : @lineHeight ; 
  }
}

ไล่โทนสี

#การไล่ระดับสี {
  . แนวนอน( @startColor : #555, @endColor: #333) { 
    พื้นหลัง- สี: @endColor ; 
    พื้นหลัง- ซ้ำ: ซ้ำ- x ;
    พื้นหลัง- รูปภาพ: - khtml - การไล่ระดับสี( เชิงเส้น, บนซ้าย, ขวาบน, จาก( @startColor ) ถึง( @endColor )); // ผู้พิชิต   
    พื้นหลัง- รูปภาพ: - moz - เชิงเส้น- การไล่ระดับสี( ซ้าย, @startColor , @endColor ); // FF 3.6+    
    พื้นหลัง- รูปภาพ: - ms - เชิงเส้น- การไล่ระดับสี( ซ้าย, @startColor , @endColor ); // IE10    
    พื้นหลัง- ภาพ: - webkit - การไล่ระดับสี( เชิงเส้น, บนซ้าย, ขวาบน, สี- หยุด( 0 %, @startColor ), สี- หยุด( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    พื้นหลัง- รูปภาพ: - webkit - เชิงเส้น- การไล่ระดับสี( ซ้าย, @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    พื้นหลัง- รูปภาพ: - o - เชิงเส้น- การไล่ระดับสี( ซ้าย, @startColor , @endColor ); // โอเปร่า 11.10    
    พื้นหลัง- รูปภาพ: เชิงเส้น- การไล่ระดับสี( ซ้าย, @startColor , @endColor ); // เลอ สแตนดาร์ด   
  }
  . แนวตั้ง( @startColor : #555, @endColor: #333) { 
    พื้นหลัง- สี: @endColor ; 
    พื้นหลัง- ซ้ำ: ซ้ำ- x ;
    พื้นหลัง- รูปภาพ: - khtml - การไล่ระดับสี( เชิงเส้น, บน ซ้าย , ล่างซ้าย, จาก( @startColor ) ถึง( @endColor )); // ผู้พิชิต   
    พื้นหลัง- รูปภาพ: - moz - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // FF 3.6+   
    พื้นหลัง- รูปภาพ: - ms - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // IE10   
    พื้นหลัง- รูปภาพ: - webkit - การไล่ระดับสี( เชิงเส้น, บน ซ้าย , ล่างซ้าย, สี- หยุด( 0 %, @startColor ), สี- หยุด( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    พื้นหลัง- ภาพ: - webkit - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    พื้นหลัง- รูปภาพ: - o - เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // โอเปร่า 11.10   
    พื้นหลัง- รูปภาพ: เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // มาตรฐาน  
  }
  . ทิศทาง( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . แนวตั้ง- สามสี( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

การดำเนินงานและระบบกริด

จินตนาการและคำนวณเพื่อสร้างมิกซ์อินที่ยืดหยุ่นและทรงพลังดังตัวอย่างด้านล่าง

// เส้นกริด
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// ระบบกริด
. คอนเทนเนอร์{
  ความกว้าง: @siteWidth ; 
  มาร์จิ้ น : 0 อัตโนมัติ;  
  . clearfix ();
}
. คอลัมน์( @columnSpan : 1 ) {  
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. ออฟเซ็ต( @columnOffset : 1 ) {  
  ระยะขอบ- ซ้าย: ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}

Bootstrap

Bootstrap จาก Twitter

Hotlink ที่ CSS

ใช้กับ Less

แยกบน GitHub

เกี่ยวกับ ประวัติย่อของ Bootstrap การสนับสนุนเบราว์เซอร์ และอื่นๆ

ประวัติศาสตร์

รองรับเบราว์เซอร์

รวมอะไรบ้าง

ระบบกริดเขย่ามาตรฐาน 940px หรือม้วนของคุณเอง

ตารางเริ่มต้น

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

คอลัมน์ออฟเซ็ต

เลย์เอาต์เทมเพลตพื้นฐานในการสร้างหน้าเว็บ

เค้าโครงคงที่

เลย์เอาต์ของไหล

หัวเรื่อง ย่อหน้ารายการ และองค์ประกอบประเภทอินไลน์อื่นๆ

หัวเรื่อง & สำเนา

ชั่วโมง1. หัวเรื่อง 1

ชั่วโมง2. หัวเรื่อง 2

ชั่วโมง3. หัวเรื่อง 3

ชั่วโมง4. หัวเรื่อง 4

h5. หัวเรื่อง 5

h6. หัวเรื่อง 6

ย่อหน้าตัวอย่าง

ตัวอย่างหัวเรื่องมีหัวเรื่องย่อย…

อื่น ๆ. องค์ประกอบ

เมื่อใดควรใช้

เน้นในย่อหน้า

ที่อยู่

ตัวย่อ

Blockquotes

วิธีอ้าง

รายการ

ไม่เรียงลำดับ<ul>

ไม่มีสไตล์<ul.unstyled>

สั่งซื้อ<ol>

คำอธิบายdl

Tables สำหรับ คุณเดาเอานะ ตาราง data

สร้างโต๊ะ

ตัวอย่าง: สไตล์ตารางเริ่มต้น

ตัวอย่าง: ลายทางม้าลาย

ตัวอย่าง: ลายทางม้าลาย w/ TableSorter.js

แบบฟอร์ม

สไตล์เริ่มต้น

แบบฟอร์มซ้อน

ปุ่ม

ปุ่มตัวอย่าง

ขนาดอื่น

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

ลิงค์

ปุ่ม

การนำทาง

แถบด้านบนคงที่

ชื่อโครงการ

มันคืออะไร

ปรับแต่งได้

รวมรายการแบบเลื่อนลง

แท็บและยาเม็ด

การแบ่งหน้า

Alerts & Errors รูปแบบสำหรับความสำเร็จ คำเตือน และข้อความแสดงข้อผิดพลาดหรือการแจ้งเตือน

การแจ้งเตือนพื้นฐาน

บล็อกข้อความ

Popovers Components สำหรับแสดงเนื้อหาในรูปแบบ modals, tooltips และ popovers

Modals

หัวเรื่องโมดอล

เคล็ดลับเครื่องมือ

ป๊อปโอเวอร์

ชื่อป๊อปโอเวอร์

การใช้ Bootstrap โดยลดการเพิ่ม CSS ของคุณด้วยตัวแปร มิกซ์อิน และฟังก์ชัน

วิธีใช้งาน

รวมอะไรบ้าง

ตัวแปร

แสดงความคิดเห็น

ผสม wazoo ขึ้น

กองแบบอักษร

ไล่โทนสี

การดำเนินงานและระบบกริด

ไม่เรียงลำดับ`<ul>`

ไม่มีสไตล์`<ul.unstyled>`

สั่งซื้อ`<ol>`

คำอธิบาย`dl`