ຕາຂ່າຍເລີ່ມຕົ້ນ

ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນທີ່ສະຫນອງໃຫ້ເປັນສ່ວນຫນຶ່ງຂອງ Bootstrap ແມ່ນຕາຂ່າຍໄຟຟ້າ 16 ຖັນກວ້າງ 940px. ມັນເປັນການປຸງລົດຊາດຂອງລະບົບຕາຂ່າຍໄຟຟ້າ 960 ທີ່ນິຍົມ, ແຕ່ບໍ່ມີຂອບ / padding ເພີ່ມເຕີມຢູ່ດ້ານຊ້າຍແລະຂວາ.

ຕົວຢ່າງເຄື່ອງຫມາຍຕາຕະລາງ

ດັ່ງທີ່ສະແດງຢູ່ນີ້, ຮູບແບບພື້ນຖານສາມາດຖືກສ້າງຂື້ນດ້ວຍສອງ "ຖັນ," ແຕ່ລະອັນກວມເອົາຈໍານວນ 16 ຖັນພື້ນຖານທີ່ພວກເຮົາກໍານົດເປັນສ່ວນຫນຶ່ງຂອງລະບົບຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາ. ເບິ່ງຕົວຢ່າງຂ້າງລຸ່ມນີ້ສໍາລັບການປ່ຽນແປງເພີ່ມເຕີມ.

<div class = "row" > 
  <div class = "span6 ຖັນ" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

ຮູບແບບຄົງທີ່

ຮູບ​ແບບ​ຖັງ​ທີ່​ມີ​ຄວາມ​ກວ້າງ 940px ພື້ນ​ຖານ​ເປັນ​ກາງ​ສໍາ​ລັບ​ພຽງ​ແຕ່​ກ່ຽວ​ກັບ​ເວັບ​ໄຊ​ຫຼື​ຫນ້າ​ໃດ​ຫນຶ່ງ​.

<ຮ່າງກາຍ>
  <div class = "container" > 
    ...
  </div>
</body>

ຮູບແບບຂອງນ້ໍາ

ໂຄງສ້າງໜ້ານ້ຳ ຫຼືຂອງແຫຼວທີ່ມີຄວາມຍືດຫຍຸ່ນທີ່ມີຄວາມກວ້າງໜ້ອຍສຸດ ແລະສູງສຸດ ແລະແຖບດ້ານຊ້າຍ. ດີຫຼາຍສໍາລັບແອັບຯ.

<ຮ່າງກາຍ>
  <div class = "container-fluid" > 
    <div class = "ແຖບດ້ານຂ້າງ" > 
      ...
    </div>
    <div class = "ເນື້ອໃນ" > 
      ...
    </div>
  </div>
</body>

ຫົວຂໍ້ແລະສໍາເນົາ

ລຳດັບຕົວພິມມາດຕະຖານສຳລັບການຈັດໂຄງສ້າງໜ້າເວັບຂອງທ່ານ.

h1. ຫົວຂໍ້ 1

h2. ຫົວຂໍ້ 2

h3. ຫົວຂໍ້ 3

h4. ຫົວຂໍ້ 4

h5. ຫົວຂໍ້ 5

h6. ຫົວຂໍ້ 6

ຕົວຢ່າງວັກ

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ຫົວຂໍ້ຕົວຢ່າງມີຫົວຂໍ້ ຍ່ອຍ...

ນອກນັ້ນທ່ານຍັງສາມາດເພີ່ມຫົວຂໍ້ຍ່ອຍດ້ວຍຫົວຂໍ້ <strong>ແລະ<em>

ອື່ນໆ. ອົງປະກອບ

ການ​ນໍາ​ໃຊ້​ການ​ເນັ້ນ​ຫນັກ​ໃສ່​, ທີ່​ຢູ່​, ແລະ​ຕົວ​ຫຍໍ້​

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

ເວລາທີ່ຈະໃຊ້

ແທັກເນັ້ນ ( <strong>ແລະ <em>) ຄວນຖືກໃຊ້ເພື່ອເພີ່ມຄວາມແຕກຕ່າງທາງສາຍຕາລະຫວ່າງຄຳສັບ ຫຼື ວະລີ ແລະ ສຳເນົາຂອງມັນ. ໃຊ້ <strong>ສໍາລັບຄວາມສົນໃຈເກົ່າທໍາມະດາແລະ <em>ສໍາລັບ ຄວາມສົນໃຈ slick ແລະຫົວຂໍ້.

ເນັ້ນໃສ່ໃນວັກຫນຶ່ງ

Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

ທີ່ຢູ່

ອົງ ປະ addressກອບແມ່ນໃຊ້ສໍາລັບ—ເຈົ້າເດົາແລ້ວ!—ທີ່ຢູ່. ນີ້ແມ່ນວິທີທີ່ມັນເບິ່ງຄືວ່າ:

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

ໝາຍເຫດ: ແຕ່ລະແຖວ addressຕ້ອງຈົບລົງດ້ວຍຕົວແຍກ ( <br />) ເພື່ອຈັດໂຄງສ້າງເນື້ອຫາໃຫ້ຖືກຕ້ອງຕາມທີ່ມັນອ່ານໃນຊີວິດຈິງ ໂດຍບໍ່ມີການໃຊ້ຮູບແບບໃດ.

ຕົວຫຍໍ້

ສຳລັບຕົວຫຍໍ້ ແລະຄຳຫຍໍ້, ໃຫ້ໃຊ້ abbrແທັກ ( acronymຖືກຍົກເລີກໃນ HTML5 ). ໃສ່ແບບຟອມຫຍໍ້ພາຍໃນແທັກແລະຕັ້ງຫົວຂໍ້ສໍາລັບຊື່ທີ່ສົມບູນ.

Blockquotes

<blockquote> <p> <cite>

ໃຫ້ແນ່ໃຈວ່າຈະຫໍ່ blockquoteປະມານ ຂອງທ່ານ paragraphແລະ citetags. ເມື່ອອ້າງເຖິງແຫຼ່ງໃດໜຶ່ງ, ໃຫ້ໃຊ້ citeອົງປະກອບ. CSS ຈະນຳໜ້າຊື່ໂດຍອັດຕະໂນມັດດ້ວຍ em dash (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

ທ່ານດຣ Julius Hibbert

ບໍ່ມີຄໍາສັ່ງ<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• ເພື່ອນຮ່ວມທີມຂອງຂ້ອຍ
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • ນິວແມນ
• ໂຢ​ຮັນ ຢາ​ໂຄບ
• Paul Pierce
• Kevin Garnett

ບໍ່ມີຮູບແບບ<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• ເພື່ອນຮ່ວມທີມຂອງຂ້ອຍ
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • ນິວແມນ
• ໂຢ​ຮັນ ຢາ​ໂຄບ
• Paul Pierce
• Kevin Garnett

ສັ່ງແລ້ວ<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. ເພື່ອນຮ່ວມທີມຂອງຂ້ອຍ
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. ນິວແມນ
6. ໂຢ​ຮັນ ຢາ​ໂຄບ
7. Paul Pierce
8. Kevin Garnett

ລາຍລະອຽດdl

ລາຍ​ລະ​ອຽດ​

ບັນຊີລາຍຊື່ຄໍາອະທິບາຍແມ່ນດີເລີດສໍາລັບການກໍານົດຂໍ້ກໍານົດ.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

ຕາຕະລາງການກໍ່ສ້າງ

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

ຕາຕະລາງແມ່ນດີຫຼາຍ - ສໍາລັບຫຼາຍຢ່າງ. ຕາຕະລາງທີ່ຍິ່ງໃຫຍ່, ແນວໃດກໍ່ຕາມ, ຕ້ອງການ markup ເລັກນ້ອຍເພື່ອໃຫ້ເປັນປະໂຫຍດ, ສາມາດຂະຫຍາຍໄດ້, ແລະສາມາດອ່ານໄດ້ (ໃນລະດັບລະຫັດ). ນີ້ແມ່ນຄໍາແນະນໍາບາງຢ່າງທີ່ຈະຊ່ວຍ.

ຫໍ່ສ່ວນຫົວຄໍລຳຂອງເຈົ້າຢູ່ໃນ theadລຳດັບລຳດັບ ສະເໝີ thead> tr> th.

ຄ້າຍຄືກັນກັບສ່ວນຫົວຂອງຖັນ, ເນື້ອໃນເນື້ອໃນຂອງຕາຕະລາງທັງໝົດຂອງທ່ານຄວນຈະຖືກຫໍ່ໄວ້ເປັນແຖວ tbodyເພື່ອໃຫ້ລໍາດັບຊັ້ນຂອງເຈົ້າເປັນ tbody> tr> td.

ຕົວຢ່າງ: ຮູບແບບຕາຕະລາງເລີ່ມຕົ້ນ

ຕາຕະລາງທັງຫມົດຈະຖືກຈັດຮູບແບບອັດຕະໂນມັດໂດຍມີພຽງແຕ່ຂອບທີ່ສໍາຄັນເພື່ອຮັບປະກັນການອ່ານແລະຮັກສາໂຄງສ້າງ. ບໍ່ຈໍາເປັນຕ້ອງເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມຫຼືຄຸນລັກສະນະ.

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ພາສາ
1	ບາງ	ຫນຶ່ງ	ພາສາອັງກິດ
2	ໂຈ	Sixpack	ພາສາອັງກິດ
3	ສະຕູ	ແຂ້ວ	ລະຫັດ

<ຕາຕະລາງ class = "common-table" > 
  ...
</table>

ຕົວຢ່າງ: Zebra-tried

ສ້າງຄວາມແປກໃໝ່ໃຫ້ກັບໂຕະຂອງເຈົ້າໂດຍການເພີ່ມລາຍເສັ້ນມ້າລາຍ—ພຽງແຕ່ເພີ່ມ .zebra-stripedຊັ້ນຮຽນ.

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ພາສາ
1	ບາງ	ຫນຶ່ງ	ພາສາອັງກິດ
2	ໂຈ	Sixpack	ພາສາອັງກິດ
3	ສະຕູ	ແຂ້ວ	ລະຫັດ

<table class = "common-table zebra-striped" > 
...
</table>

ຕົວຢ່າງ: Zebra-striped w/ TableSorter.js

ເອົາຕົວຢ່າງທີ່ຜ່ານມາ, ພວກເຮົາປັບປຸງປະໂຫຍດຂອງຕາຕະລາງຂອງພວກເຮົາໂດຍການສະຫນອງການທໍາງານການຈັດລຽງໂດຍຜ່ານ jQuery ແລະ Tablesorter plugin. ຄລິກສ່ວນຫົວຂອງຖັນໃດນຶ່ງເພື່ອປ່ຽນການຈັດຮຽງ.

#	ຊື່​ແທ້	ນາມ​ສະ​ກຸນ	ພາສາ
1	ຂອງເຈົ້າ	ຫນຶ່ງ	ພາສາອັງກິດ
2	ໂຈ	Sixpack	ພາສາອັງກິດ
3	ສະຕູ	ແຂ້ວ	ລະຫັດ

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<script type = "text/javascript" > 
  $ ( ເອກະສານ ). ພ້ອມ ( ຟັງຊັນ () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

ຮູບແບບເລີ່ມຕົ້ນ

ຮູບແບບທັງໝົດແມ່ນໃຫ້ຮູບແບບເລີ່ມຕົ້ນເພື່ອນຳສະເໜີພວກມັນໃນແບບທີ່ອ່ານໄດ້ ແລະສາມາດຂະຫຍາຍໄດ້. ຮູບແບບແມ່ນສະໜອງໃຫ້ສຳລັບການປ້ອນຂໍ້ຄວາມ, ເລືອກລາຍການ, ພື້ນທີ່ຂໍ້ຄວາມ, ປຸ່ມວິທະຍຸ ແລະກ່ອງກາໝາຍ, ແລະປຸ່ມຕ່າງໆ.

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ປ້ອນຂໍ້ມູນໃຫຍ່ X

ເລືອກ

1 2 3 4 5

ເລືອກ

1 2 3 4 5

ການປ້ອນຂໍ້ມູນທີ່ບໍ່ສາມາດແກ້ໄຂໄດ້

ບາງມູນຄ່າຢູ່ທີ່ນີ້

ປິດການປ້ອນຂໍ້ມູນ

ປ້ອນຂໍ້ມູນໃຫຍ່ X

ຂໍ້​ຄວາມ​ຊ່ວຍ​ເຫຼືອ​ຂະ​ຫນາດ​ນ້ອຍ​

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ຂໍ້ຄວາມລ່ວງໜ້າ

@

ກ່ອງໝາຍຖືກກຽມໄວ້

ຕື່ມໃສ່ກ່ອງໝາຍຕິກ

ການປ້ອນຂໍ້ມູນໄຟລ໌

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ລາຍຊື່ຕົວເລືອກ

• ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
• ທາງ​ເລືອກ​ທີ​ສອງ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ​ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ຮູບ​ແບບ​
• ທາງ​ເລືອກ​ທີ່​ສາມ​ສາ​ມາດ—ແມ່ນ​ແລ້ວ, ທ່ານ​ເດົາ​ມັນ—ຍັງ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ແບບ​ຟອມ
• ທາງເລືອກສີ່ບໍ່ສາມາດກວດສອບໄດ້ຍ້ອນວ່າມັນຖືກປິດໃຊ້ງານ.

ໝາຍເຫດ: ປ້າຍກຳກັບອ້ອມຮອບຕົວເລືອກທັງໝົດສຳລັບພື້ນທີ່ຄລິກທີ່ໃຫຍ່ກວ່າ ແລະຮູບແບບທີ່ສາມາດໃຊ້ໄດ້ຫຼາຍກວ່າ.

ຊ່ວງວັນທີ

ກັບ ເວລາທັງໝົດແມ່ນສະແດງເປັນເວລາມາດຕະຖານປາຊີຟິກ (GMT -08:00).

Textarea

ບລັອກຂໍ້ຄວາມຊ່ວຍເຫຼືອເພື່ອອະທິບາຍຊ່ອງຂໍ້ມູນຂ້າງເທິງຖ້າຕ້ອງການ.

ລາຍຊື່ຕົວເລືອກ

• ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
• ທາງ​ເລືອກ​ທີ​ສອງ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ​ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ຮູບ​ແບບ​

ບັນ​ທຶກ​ການ​ປ່ຽນ​ແປງ ຍົກເລີກ

ຮູບແບບຊ້ອນກັນ

ເພີ່ມໃສ່ .form-stackedHTML ຂອງແບບຟອມຂອງເຈົ້າ ແລະເຈົ້າຈະມີປ້າຍຊື່ຢູ່ດ້ານເທິງຂອງຊ່ອງຂໍ້ມູນຂອງເຂົາເຈົ້າ ແທນທີ່ຈະຢູ່ທາງຊ້າຍຂອງພວກມັນ. ນີ້ເຮັດວຽກໄດ້ດີຖ້າແບບຟອມຂອງທ່ານສັ້ນຫຼືທ່ານມີສອງຖັນຂອງວັດສະດຸປ້ອນສໍາລັບແບບຟອມທີ່ຫນັກກວ່າ.

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ປ້ອນຂໍ້ມູນໃຫຍ່ X

ເລືອກ

1 2 3 4 5

ຕົວ​ຢ່າງ​ຮູບ​ແບບ​ນິ​ທານ​

ລາຍຊື່ຕົວເລືອກ

• ທາງ​ເລືອກ​ທີ​ຫນຶ່ງ​ແມ່ນ​ນີ້​ແລະ​ທີ່ — ໃຫ້​ແນ່​ໃຈວ່​າ​ຈະ​ປະ​ກອບ​ເປັນ​ຫຍັງ​ມັນ​ດີ​ເລີດ​
• ທາງ​ເລືອກ​ທີ​ສອງ​ຍັງ​ສາ​ມາດ​ໄດ້​ຮັບ​ການ​ກວດ​ສອບ​ແລະ​ລວມ​ເຂົ້າ​ໃນ​ຜົນ​ໄດ້​ຮັບ​ຂອງ​ຮູບ​ແບບ​

ໝາຍເຫດ: ປ້າຍກຳກັບອ້ອມຮອບຕົວເລືອກທັງໝົດສຳລັບພື້ນທີ່ຄລິກທີ່ໃຫຍ່ກວ່າ ແລະຮູບແບບທີ່ສາມາດໃຊ້ໄດ້ຫຼາຍກວ່າ.

ບັນ​ທຶກ​ການ​ປ່ຽນ​ແປງ ຍົກເລີກ

ປຸ່ມ

ໃນຖານະເປັນສົນທິສັນຍາ, ປຸ່ມຖືກນໍາໃຊ້ສໍາລັບການດໍາເນີນການໃນຂະນະທີ່ການເຊື່ອມຕໍ່ຖືກນໍາໃຊ້ສໍາລັບວັດຖຸ. ຕົວຢ່າງ, "ດາວໂຫລດ" ສາມາດເປັນປຸ່ມແລະ "ກິດຈະກໍາທີ່ຜ່ານມາ" ສາມາດເປັນການເຊື່ອມຕໍ່.

ປຸ່ມທັງໝົດເລີ່ມຕົ້ນເປັນຮູບແບບສີເທົາອ່ອນ, ແຕ່ປະເພດສີຟ້າ .primaryສາມາດໃຊ້ໄດ້. ນອກຈາກນັ້ນ, ມ້ວນຄໍເຕົ້າໄຂ່ທີ່ຂອງທ່ານເອງແມ່ນງ່າຍ peasy.

ປຸ່ມຕົວຢ່າງ

ຮູບແບບປຸ່ມສາມາດຖືກນໍາໄປໃຊ້ກັບອັນໃດກໍໄດ້ທີ່ມີການ .btnນຳໃຊ້. ໂດຍປົກກະຕິເຈົ້າຈະຕ້ອງໃຊ້ສິ່ງເຫຼົ່ານີ້ໃສ່ພຽງແຕ່ a, button, ແລະເລືອກ inputອົງປະກອບເທົ່ານັ້ນ. ນີ້ແມ່ນວິທີທີ່ມັນເບິ່ງຄືວ່າ:

ຂະໜາດສຳຮອງ

ຕ້ອງການປຸ່ມໃຫຍ່ ຫຼືນ້ອຍກວ່າບໍ? ມີຢູ່!

ສະຖານະຄົນພິການ

ສຳລັບປຸ່ມທີ່ບໍ່ເຄື່ອນໄຫວ ຫຼືຖືກປິດການນຳໃຊ້ໂດຍແອັບຯດ້ວຍເຫດຜົນອັນໜຶ່ງ ຫຼືອີກອັນໜຶ່ງ, ໃຫ້ໃຊ້ສະຖານະທີ່ຖືກປິດການນຳໃຊ້. ນັ້ນແມ່ນ .disabledສໍາລັບການເຊື່ອມຕໍ່ແລະ :disabledສໍາລັບ buttonອົງປະກອບ.

ລິ້ງຄ໌

ປຸ່ມ

ມັນ​ແມ່ນ​ຫຍັງ

ແຖບເທິງຂອງພວກເຮົາແມ່ນແຖບຄົງທີ່ທີ່ຕັ້ງໂລໂກ້ ຫຼືຊື່ຂອງເວັບໄຊທ໌, ການນໍາທາງຫຼັກ ແລະແບບຟອມຄົ້ນຫາ.

ສາມາດປັບແຕ່ງໄດ້

ອົງປະກອບທັງຫມົດພາຍໃນ, ແລະແຖບເທິງທັງຫມົດເຊັ່ນດຽວກັນ, ແມ່ນທາງເລືອກ. ທ່ານ​ສາ​ມາດ​ເລືອກ​ທີ່​ຈະ​ປະ​ກອບ​ມີ​ສັນ​ຍາ​ລັກ / ຊື່​, nav​, ການ​ຄົ້ນ​ຫາ​, ແລະ​ການ nav ຮອງ​ຫຼື​ການ​ປະ​ສົມ​ຂອງ​ມັນ​.

ລວມມີລາຍການແບບເລື່ອນລົງ

ເປັນສ່ວນຫນຶ່ງຂອງການນໍາທາງຕົ້ນຕໍ, ພວກເຮົາໄດ້ລວມເອົາຄວາມສາມາດສໍາລັບທ່ານທີ່ຈະເພີ່ມ dropdowns ໃສ່ navigation ຂອງທ່ານ. ກວດເບິ່ງການນໍາທາງທີສອງຂ້າງເທິງ (ຈັດຮຽງຂວາ) ເພື່ອເບິ່ງວ່າມັນເຮັດໄດ້ຢ່າງໃດ.

ແຖບແລະຢາຄຸມກໍາເນີດ

ສ້າງການນໍາທາງຂັ້ນສອງແບບງ່າຍດາຍດ້ວຍ a ul. ແລກປ່ຽນລະຫວ່າງແຖບຫຼືຢາໂດຍການເພີ່ມຊັ້ນທີ່ເຫມາະສົມ.

ດີເລີດສໍາລັບພາກສ່ວນຍ່ອຍຂອງເນື້ອຫາເຊັ່ນຫນ້າການຕັ້ງຄ່າບັນຊີຂອງພວກເຮົາແລະໄລຍະເວລາຂອງຜູ້ໃຊ້ສໍາລັບການສະຫຼັບລະຫວ່າງຫນ້າຂອງເນື້ອຫາ. ມີຢູ່ໃນຮູບແບບເມັດຫຼືຢາ.

• ບ້ານ
• ໂປຣໄຟລ໌
• ຂໍ້ຄວາມ
• ການຕັ້ງຄ່າ
• ຕິດຕໍ່

<ul class = "tabs" > 
  <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 = "pills" > 
  <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>

Pagination

ການສ້າງໜ້າແບບລຽບງ່າຍ ແລະ ໜ້ອຍທີ່ສຸດທີ່ໄດ້ຮັບແຮງບັນດານໃຈຈາກ Rdio. ຕັນຂະຫນາດໃຫຍ່ແມ່ນຍາກທີ່ຈະພາດ, ຂະຫຍາຍໄດ້ງ່າຍ, ແລະສະຫນອງພື້ນທີ່ຄລິກຂະຫນາດໃຫຍ່.

<div class = "page" > 
  <ul>
    <li class = "prev disabled" > <a href = ""> ← ທີ່ຜ່ານມາ </a></li>  
    <li class = "active" > <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 = ""> ຕໍ່ໄປ → </a></li>  
  </ul>
</div>

ການແຈ້ງເຕືອນພື້ນຖານ

ຂໍ້ຄວາມແຖວດຽວສໍາລັບການເນັ້ນຄວາມລົ້ມເຫລວ, ຄວາມລົ້ມເຫຼວທີ່ເປັນໄປໄດ້, ຫຼືຄວາມສໍາເລັດຂອງການກະທໍາ. ໂດຍສະເພາະທີ່ເປັນປະໂຫຍດສໍາລັບແບບຟອມ.

ບລັອກຂໍ້ຄວາມ

ສໍາລັບຂໍ້ຄວາມທີ່ຕ້ອງການຄໍາອະທິບາຍເລັກນ້ອຍ, ພວກເຮົາມີການແຈ້ງເຕືອນແບບຫຍໍ້ຫນ້າ. ເຫຼົ່ານີ້ແມ່ນດີເລີດສໍາລັບການ bubbling ເຖິງຂໍ້ຄວາມຄວາມຜິດພາດທີ່ຍາວກວ່າ, ເຕືອນຜູ້ໃຊ້ຂອງການປະຕິບັດທີ່ຍັງຄ້າງ, ຫຼືພຽງແຕ່ນໍາສະເຫນີຂໍ້ມູນຂ່າວສານສໍາລັບການເນັ້ນຫນັກໃສ່ຫຼາຍໃນຫນ້າ.

ໂມດູນ

Modals-dialogs ຫຼື lightboxes-ແມ່ນດີເລີດສໍາລັບການດໍາເນີນການຕາມບໍລິບົດໃນສະຖານະການທີ່ມັນສໍາຄັນທີ່ຈະຮັກສາສະພາບການພື້ນຫລັງ.

Popovers

ໃຊ້ popovers ເພື່ອສະຫນອງຂໍ້ມູນ subtextual ໃຫ້ກັບຫນ້າໃດຫນຶ່ງໂດຍບໍ່ມີການຜົນກະທົບຮູບແບບ.

Bootstrap ຖືກສ້າງຂຶ້ນດ້ວຍ Preboot , ເປັນຊຸດ open-source ຂອງ mixins ແລະຕົວແປທີ່ຈະໃຊ້ຮ່ວມກັນກັບ Less , CSS preprocessor ສໍາລັບການພັດທະນາເວັບໄວແລະງ່າຍຂຶ້ນ.

ກວດເບິ່ງວ່າພວກເຮົາໃຊ້ Preboot ໃນ Bootstrap ແນວໃດແລະວິທີທີ່ທ່ານສາມາດໃຊ້ມັນໄດ້ຖ້າທ່ານເລືອກທີ່ຈະດໍາເນີນການຫນ້ອຍລົງໃນໂຄງການຕໍ່ໄປຂອງທ່ານ.

ວິທີການນໍາໃຊ້ມັນ

ໃຊ້ຕົວເລືອກນີ້ເພື່ອເຮັດໃຫ້ການນໍາໃຊ້ຢ່າງເຕັມທີ່ຂອງຕົວແປຫນ້ອຍຂອງ Bootstrap, mixins, ແລະ nesting ໃນ CSS ຜ່ານ javascript ໃນຕົວທ່ອງເວັບຂອງທ່ານ.

<link 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 :     darken ( @linkColor , 10 ); 
 
// ສີເທົາ
@ດຳ : #000;             
@greyDark :           lighten ( @black , 25 % ); 
@ ສີ ເທົາ :               ອ່ອນ ( @black , 50 % ); 
@greyLight :          lighten ( @black , 70 % ); 
@greyLighter :        lighten ( @black , 90 % ); 
@ຂາວ : #ffff ;             
 
// ສີທີ່ເນັ້ນສຽງ
@blue : #08b5fb ;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d ;            
@ສີສົ້ມ : #f89406 ;            
@ສີບົວ : #c3325f ;              
@ສີມ່ວງ : #7a43b6 ;            
 
// ພື້ນຖານ
@ ພື້ນ ຖານ : 20px ;          

ຄໍາເຫັນ

/* ... */Less ຍັງສະຫນອງຮູບແບບການສະແດງຄວາມຄິດເຫັນອື່ນນອກເຫນືອຈາກ syntax ປົກກະຕິຂອງ CSS .

// ນີ້ແມ່ນຄໍາເຫັນ
/* ນີ້​ແມ່ນ​ຄໍາ​ຄິດ​ເຫັນ */

Mixins ເຖິງ wazoo ໄດ້

Mixins ໂດຍພື້ນຖານແລ້ວແມ່ນລວມເອົາຫຼືບາງສ່ວນສໍາລັບ CSS, ຊ່ວຍໃຫ້ທ່ານສາມາດລວມຕົວບລັອກຂອງລະຫັດເຂົ້າໄປໃນຫນຶ່ງ. ພວກມັນດີເລີດສຳລັບຄຸນສົມບັດນຳໜ້າຂອງຜູ້ຂາຍເຊັ່ນ: box-shadow, ລະດັບສີຂ້າມ browser, stacks ຟອນ, ແລະອື່ນໆອີກ. ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງ mixins ທີ່ລວມຢູ່ໃນ Bootstrap.

ຟອນ stacks

#ຟອນ {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "ໂມນາໂກ" , Courier New , monospace ;   
    ຕົວອັກສອນ - ຂະຫນາດ : @size ; 
    font - weight : @weight ; 
    ເສັ້ນ - ຄວາມສູງ : @lineHeight ; 
  }
}

ຊັ້ນສີ

#gradient {
  . ລວງນອນ ( @startColor : #555, @endColor: #333) { 
    ພື້ນຫຼັງ - ສີ : @endColor ; 
    ພື້ນຫຼັງ - repeat : repeat - x ;
    ພື້ນຫຼັງ - ຮູບພາບ : - khtml - gradient ( ເສັ້ນ , ຊ້າຍເທິງ , ເທິງຂວາ , ຈາກ ( @startColor ), ເຖິງ ( @endColor )); // Konqueror   
    ພື້ນຫລັງ - ຮູບພາບ : - moz - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // FF 3.6+    
    ພື້ນຫລັງ - ຮູບພາບ : - ms - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // IE10    
    ພື້ນຫຼັງ - ຮູບ : - webkit - gradient ( ເສັ້ນ , ຊ້າຍ ເທິງ , ເທິງ ຂວາ , ສີ - ຢຸດ ( 0 %, @startColor ), ສີ - ຢຸດ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ພື້ນຫລັງ - ຮູບພາບ : - webkit - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    ພື້ນຫລັງ - ຮູບພາບ : - o - linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    ພື້ນຫລັງ - ຮູບພາບ : linear - gradient ( ຊ້າຍ , @startColor , @endColor ); // ເລມາດຕະຖານ   
  }
  . ແນວຕັ້ງ ( @startColor : #555, @endColor: #333) { 
    ພື້ນຫຼັງ - ສີ : @endColor ; 
    ພື້ນຫຼັງ - repeat : repeat - x ;
    ພື້ນຫຼັງ - ຮູບ : - khtml - gradient ( ເສັ້ນ , ຊ້າຍ ເທິງ , ລຸ່ມ ຊ້າຍ , ຈາກ ( @startColor ) , ເຖິງ ( @endColor )); // Konqueror   
    ພື້ນຫລັງ - ຮູບພາບ : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    ພື້ນຫລັງ - ຮູບພາບ : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    ພື້ນຫຼັງ - ຮູບ : - webkit - gradient ( ເສັ້ນ , ຊ້າຍ ເທິງ , ລຸ່ມ ຊ້າຍ , ສີ - ຢຸດ ( 0 %, @startColor ), ສີ - ຢຸດ ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    ພື້ນຫລັງ - ຮູບພາບ : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    ພື້ນຫລັງ - ຮູບພາບ : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    ພື້ນຫລັງ - ຮູບພາບ : linear - gradient ( @startColor , @endColor ); // ມາດຕະຖານ  
  }
  . ທິດທາງ ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ແນວຕັ້ງ - ສາມ ສີ ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

ການດໍາເນີນງານແລະລະບົບຕາຂ່າຍໄຟຟ້າ

ຈິນຕະນາການແລະປະຕິບັດຄະນິດສາດບາງຢ່າງເພື່ອສ້າງ mixins ທີ່ມີຄວາມຍືດຫຍຸ່ນແລະມີອໍານາດຄືກັບອັນຂ້າງລຸ່ມນີ້.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// ລະບົບຕາຂ່າຍ
. ຕູ້ຄອນເທນເນີ {
  width : @siteWidth ; 
  ຂອບ : 0 ອັດຕະໂນມັດ ;  
  . clearfix ();
}
. ຖັນ ( @columnSpan : 1 ) {  
  ຈໍສະແດງຜົນ : inline ; 
  ເລື່ອນ : ຊ້າຍ ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  ຂອບ - ຊ້າຍ : @gridGutterWidth ; 
  &: ລູກ ທຳ ອິດ {
    ຂອບ - ຊ້າຍ : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  ຂອບ - ຊ້າຍ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! ສໍາຄັນ ;          
}