ทวิตเตอร์ Bootstrap

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

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

Hotlink ที่ CSS

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

ใช้กับ Less

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

แยกบน GitHub

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

Bootstrap บน GitHub »

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

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

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

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

<div class="row">
  <div class = "span6 แอปพลิเคชัน" > 
    ...
  </div>
  <div class = "span10 คอลัมน์" > 
    ...
  </div>
</div>

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

8 ออฟเซ็ต 4

4 ออฟเซ็ต 4

5 ออฟเซ็ต 3

10 ออฟเซ็ต 6

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

เค้าโครงคอนเทนเนอร์แบบกึ่งกลางกว้าง 940px แบบพื้นฐานสำหรับไซต์หรือหน้าใดก็ได้

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

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

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

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

หัวเรื่องและสำเนา

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

ชั่วโมง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>and<em>

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

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

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

ที่อยู่

องค์ประกอบaddressนี้ใช้สำหรับ—คุณเดาสิ!—ที่อยู่ นี่คือลักษณะ:

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

หมายเหตุ:แต่ละบรรทัดใน an addressต้องลงท้ายด้วยตัวแบ่งบรรทัด ( <br />) เพื่อจัดโครงสร้างเนื้อหาอย่างถูกต้องตามที่อ่านในชีวิตจริงโดยไม่ต้องใช้รูปแบบใด ๆ

ตัวย่อ

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

Blockquotes

<blockquote> <p> <cite>

อย่าลืมพันblockquoteรอบparagraphและciteแท็กของคุณ เมื่ออ้างอิงแหล่งที่มา ให้ใช้citeองค์ประกอบ CSS จะนำหน้าชื่อด้วยเครื่องหมายขีดกลาง (—) โดยอัตโนมัติ

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
ดร.จูเลียส ฮิบเบิร์ต

รายการ

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

Jeremy Bixby
Robert Dezure
Josh Washington
Anton Capresi
เพื่อนร่วมทีมของฉัน
- George Castanza
- Jerry Seinfeld
- คอสโม เครเมอร์
- เอเลน เบนนิส
- ผู้ชายคนใหม่
จอห์น เจคอบ
พอล เพียร์ซ
เควิน การ์เน็ตต์

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

Jeremy Bixby
Robert Dezure
Josh Washington
Anton Capresi
เพื่อนร่วมทีมของฉัน
- George Castanza
- Jerry Seinfeld
- คอสโม เครเมอร์
- เอเลน เบนนิส
- ผู้ชายคนใหม่
จอห์น เจคอบ
พอล เพียร์ซ
เควิน การ์เน็ตต์

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

Jeremy Bixby
Robert Dezure
Josh Washington
Anton Capresi
เพื่อนร่วมทีมของฉัน
1. George Castanza
2. Jerry Seinfeld
3. คอสโม เครเมอร์
4. เอเลน เบนนิส
5. ผู้ชายคนใหม่
จอห์น เจคอบ
พอล เพียร์ซ
เควิน การ์เน็ตต์

คำอธิบาย`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 class="common-table"> class = "โต๊ะทั่วไป" >
  ...
</table>

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

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

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

<table class="common-table zebra-striped"> class = "ลายทางม้าลายโต๊ะทั่วไป" >
...
</table>

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

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

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

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> พิมพ์= "ข้อความ/จาวาสคริปต์" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( เอกสาร). พร้อม( ฟังก์ชั่น() { 
    $ ( "table#sortTableExample" ) tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "โต๊ะลายม้าลายทั่วไป" > 
  ...
</table>

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

มันคืออะไร

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

ปรับแต่งได้

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

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

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

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

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

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

<ul class="tabs"> 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="ยา"> 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 class="pagination"> class = "การแบ่งหน้า" >
  <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>

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

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

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

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

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

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

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

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

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

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

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

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

ทำได้ดี!คุณอ่านข้อความแจ้งเตือนนี้สำเร็จแล้ว 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" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "ทั้งหมด" />    
<script type = "text/javascript" src = "js/less-1.0.41.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 ;            
// พื้นฐาน
@baseline : 20px ;

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

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    
    - ms - ตัวกรอง: %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    ตัวกรอง: e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    พื้นหลัง- รูปภาพ: เชิงเส้น- การไล่ระดับสี( ซ้าย, @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   
    - ms - ตัวกรอง: %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    ตัวกรอง: e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    พื้นหลัง- รูปภาพ: เชิงเส้น- ไล่ระดับสี( @startColor , @endColor ); // มาตรฐาน  
  }
  . ทิศทาง( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . แนวตั้ง- สามสี( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

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

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

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

Bootstrap

ทวิตเตอร์ Bootstrap

Hotlink ที่ CSS

ใช้กับ Less

แยกบน GitHub

ระบบกริดเขย่ามาตรฐาน 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`