Grid standar

Sistem grid standar anu disayogikeun salaku bagian tina Bootstrap nyaéta grid 16-kolom lega 940px. Éta rasa tina sistem grid 960 populér, tapi tanpa margin tambahan / padding di sisi kénca sareng katuhu.

Contona grid markup

Sapertos anu dipidangkeun di dieu, tata perenah dasar tiasa didamel ku dua "kolom," masing-masing ngalangkungan sajumlah 16 kolom dasar anu kami definisikeun salaku bagian tina sistem grid kami. Tempo conto di handap pikeun leuwih variasi.

<div class="baris">
  <div class = "span6 kolom" > 
    ...
  </div>
  <div class = "span10 kolom" > 
    ...
  </div>
</div>

perenah maneuh

A dasar 940px lega, perenah wadahna dipuseurkeun pikeun ngan ngeunaan sagala situs atawa kaca.

<awak>
  <div class = "wadah" > 
    ...
  </div>
</awak>

Susunan cairan

Struktur halaman cairan atanapi cair anu fleksibel kalayan lebar min- sareng maksimal sareng sidebar kénca. Gede pikeun aplikasi.

<awak>
  <div class = "wadah-cairan" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "eusi" > 
      ...
    </div>
  </div>
</awak>

Judul sareng salinan

Hierarki tipografi standar pikeun nyusun halaman wéb anjeun.

h1. Judul 1

h2. Judul 2

h3. Judul 3

h4. Judul 4

h5. Judul 5

h6. Judul 6

Conto paragraf

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.

Conto judul Mibanda subjudul...

Anjeun oge bisa nambahkeun subjudul jeung <strong>jeung<em>

Misc. elemen

Ngagunakeun tekenan, alamat, & singketan

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

Nalika ngagunakeun

Tekenan tag ( <strong>jeung <em>) kudu dipaké pikeun nambahkeun bédana visual antara kecap atawa frasa jeung salinan sabudeureun na. Paké <strong>pikeun perhatian heubeul polos tur <em>pikeun perhatian slick jeung judul.

Tekenan dina hiji paragraf

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.

Alamat

Unsur addressdipaké pikeun-anjeun ditebak!-alamat. Ieu kumaha katingalina:

Twitter, Nyarita
795 Folsom Ave, Suite 600
San Fransisco, CA 94107
P: (123) 456-7890

Catetan: Unggal baris dina hiji addresskudu ditungtungan ku garis-break ( <br />) mun leres struktur eusi sakumaha eta dibaca dina kahirupan nyata tanpa gaya dilarapkeun.

Singgetan

Pikeun singketan sareng akronim, paké abbrtag ( acronymdileungitkeun dina HTML5 ). Nempatkeun formulir shorthand dina tag tur nyetel judul pikeun ngaran lengkep.

Blockquotes

<blockquote> <p> <cite>

Pastikeun pikeun mungkus blockquotesabudeureun anjeun paragraphsarta citetag. Nalika nyebatkeun sumber, nganggo citeunsur. CSS bakal otomatis miheulaan ngaran kalawan em dash (& mdash;).

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

Dr Julius Hibbert

Teu diurut<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capres
• Babaturan Tim kuring
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bénis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Teu gaya<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capres
• Babaturan Tim kuring
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bénis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Dititah<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capres
5. Babaturan Tim kuring
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bénis
   5. Newman
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Katerangandl

Daptar pedaran

Daptar pedaran sampurna pikeun nangtukeun istilah.

Euismod

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

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Ngawangun méja

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

Méja anu saé-pikeun seueur hal. Méja hébat, kumaha oge, peryogi sakedik markup cinta janten mangpaat, scalable, sareng tiasa dibaca (dina tingkat kode). Ieu sababaraha tip pikeun ngabantosan.

Salawasna bungkus header kolom anjeun dina theadhirarki sapertos anu thead> tr> th.

Sarupa jeung lulugu kolom, sakabeh eusi awak tabel anjeun kudu dibungkus dina tbodyjadi hirarki anjeun tbody> tr> td.

Conto: Gaya tabel standar

Sadaya tabel bakal ditata sacara otomatis kalayan ngan ukur wates anu penting pikeun mastikeun kabaca sareng ngajaga struktur. Henteu kedah nambihan kelas atanapi atribut tambahan.

#	Nami payun	Nami pengker	Basa
1	Sababaraha	Hiji	Inggris
2	Joe	Sixpack	Inggris
3	Stu	Lentong	Kodeu

<table class="common-table"> class = "méja umum" >
  ...
</tabel>

Contona: belang zebra

Kéngingkeun sakedik méja anjeun ku nambihan zebra-striping-ngan tambahkeun .zebra-stripedkelasna.

#	Nami payun	Nami pengker	Basa
1	Sababaraha	Hiji	Inggris
2	Joe	Sixpack	Inggris
3	Stu	Lentong	Kodeu

<table class="common-table zebra-striped"> class = "umum-méja zebra-belang" >
...
</tabel>

Conto: Zebra-belang w/ TableSorter.js

Nyandak conto samemehna, urang ningkatkeun mangpaat tabel kami ku nyadiakeun fungsionalitas asihan via jQuery jeung plugin Tablesorter . Klik lulugu kolom mana wae pikeun ngarobah nurun.

#	Nami payun	Nami pengker	Basa
1	Anjeun	Hiji	Inggris
2	Joe	Sixpack	Inggris
3	Stu	Lentong	Kodeu

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script type = "text/javascript" > 
  $ ( dokumen ). siap ( fungsi () { 
    $ ( "tabél#sortTableConto" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "umum-méja zebra-belang" > 
  ...
</tabel>

Gaya standar

Sadaya bentuk dipasihan gaya standar pikeun nampilkeunana dina cara anu tiasa dibaca sareng tiasa skala. Gaya disayogikeun pikeun input téks, pilih daptar, daérah téks, tombol radio sareng kotak centang, sareng tombol.

Conto wangun legenda

X-Input badag

Pilih

1 2 3 4 5

Pilih

1 2 3 4 5

Input Uneditable

Sababaraha Nilai Ieuh

Input ditumpurkeun

X-Input badag

snippet leutik téks pitulung

Conto wangun legenda

Téks anu Dipasang

@

Kotak centang anu dianteurkeun

Kotak centang ditambahkeun

Input File

Conto wangun legenda

Daptar Pilihan

• Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
• Pilihan dua ogé tiasa dipariksa sareng kalebet dina hasil formulir
• Pilihan tilu tiasa-enya, anjeun ditebak-ogé dipariksa sareng kalebet dina hasil formulir
• Pilihan opat teu tiasa dipariksa sabab ditumpurkeun.

Catetan: Labél ngurilingan sadaya pilihan pikeun daérah klik anu langkung ageung sareng bentuk anu langkung tiasa dianggo.

Rentang Tanggal

ka Sadaya waktos ditampilkeun salaku Waktos Standar Pasifik (GMT -08:00).

Textarea

Blok téks pitulung pikeun ngajelaskeun widang di luhur upami diperyogikeun.

Daptar Pilihan

• Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
• Pilihan dua ogé tiasa dipariksa sareng kalebet dina hasil formulir

Simpen Parobahan Ngabolaykeun

Bentuk tumpuk

Tambahkeun .form-stackedka HTML formulir anjeun sarta anjeun bakal boga labél dina luhureun widang maranéhanana tinimbang ka kénca maranéhanana. Ieu tiasa dianggo saé upami formulir anjeun pondok atanapi anjeun gaduh dua kolom input pikeun bentuk anu langkung beurat.

Conto wangun legenda

X-Input badag

Pilih

1 2 3 4 5

Conto wangun legenda

Daptar Pilihan

• Pilihan hiji nyaéta ieu sareng éta-pastikeun kalebet naha éta saé
• Pilihan dua ogé tiasa dipariksa sareng kalebet dina hasil formulir

Catetan: Labél ngurilingan sadaya pilihan pikeun daérah klik anu langkung ageung sareng bentuk anu langkung tiasa dianggo.

Simpen Parobahan Ngabolaykeun

Kancing

Salaku konvénsi a, tombol dipaké pikeun lampah bari Tumbu dipaké pikeun objék. Salaku conto, "Unduh" tiasa janten tombol sareng "aktivitas panganyarna" tiasa janten tautan.

Sadaya tombol standar kana gaya kulawu lampu, tapi aya .primarykelas biru. Tambih Deui, rolling gaya Anjeun sorangan gampang peasy.

Conto tombol

Gaya tombol tiasa diterapkeun kana naon waé anu .btnditerapkeun. Biasana anjeun badé nerapkeun ieu ngan ukur a, button, sareng pilih inputelemen. Ieu kumaha katingalina:

Ukuran alternatip

Fancy tombol gedé atawa leutik? Kudu di dinya!

kaayaan ditumpurkeun

Pikeun tombol nu teu aktip atawa ditumpurkeun ku aplikasi pikeun hiji alesan atawa sejen, make kaayaan ditumpurkeun. Éta .disabledpikeun tautan sareng :disabledpikeun buttonelemen.

Tumbu

Kancing

Anu mana

Topbar kami mangrupikeun bar tetep anu ngagaduhan logo atanapi nami halaman wéb, navigasi primér, sareng bentuk milarian.

Bisa disaluyukeun

Kabéh elemen dina, sarta sakabéh topbar ogé, mangrupa pilihan. Anjeun tiasa milih ngalebetkeun logo/nami, nav, milarian, sareng nav sekundér-atanapi kombinasi naon waé.

Dropdowns kaasup

Salaku bagian tina navigasi utama, kami geus kaasup kamampuhan pikeun anjeun pikeun nambahkeun dropdowns mun nav Anjeun. Pariksa nav sekundér luhur (Blok katuhu) pikeun katingal kumaha eta tos rengse.

Tab jeung pil

Jieun navigasi sekundér basajan kalawan ul. Swap antara tab atawa pil ku nambahkeun kelas luyu.

Saé pikeun sub-bagian eusi sapertos halaman setélan akun kami sareng garis waktos pangguna pikeun togling antara halaman eusi anu sami. Sadia dina gaya tabbed atanapi pil.

• Imah
• Propil
• Talatah
• Setélan
• Kontak

<ul class="tabs"> class = "tab" >
  <li class = "aktif" ><a href = "" > Imah </a></li>  
  <li><a href = "" > Propil </a></li> 
  <li><a href = "" > Talatah </a></li> 
  <li><a href = "" > Setélan </a></li> 
  <li><a href = "" > Kontak </a></li> 
</ul>

• Imah
• Propil
• Talatah
• Setélan
• Kontak

<ul class="pil"> kelas = "pil" >
  <li class = "aktif" ><a href = "" > Imah </a></li>  
  <li><a href = "" > Propil </a></li> 
  <li><a href = "" > Talatah </a></li> 
  <li><a href = "" > Setélan </a></li> 
  <li><a href = "" > Kontak </a></li> 
</ul>

Pagination

pagination ultra saderhana sareng gaya minimal anu diideuan ku Rdio. Blok badag hésé sono, gampang scalable, sarta nyadiakeun wewengkon klik badag.

<div class="pagination"> class = "pagination" >
  <ul>
    <li class = "prev ditumpurkeun" ><a href = ""> & larr ; saméméhna </a></li>  
    <li class = "aktif" ><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 = "salajengna" ><a href = "" > Salajengna & rarr; </a></li>  
  </ul>
</div>

Panggeuing dasar

Pesen hiji-garis pikeun nyorot kagagalan, kamungkinan kagagalan, atanapi kasuksésan tindakan. Utamana mangpaat pikeun formulir.

Meungpeuk pesen

Pikeun pesen anu peryogi sakedik katerangan, kami gaduh panggeuing gaya paragraf. Ieu sampurna pikeun ngagedekeun pesen kasalahan anu langkung panjang, ngingetkeun pangguna ngeunaan tindakan anu ditangguhkeun, atanapi ngan ukur nunjukkeun inpormasi pikeun langkung tekenan kana halaman éta.

Modal

Modals—dialog atawa lightboxes—saé pisan pikeun tindakan kontekstual dina situasi anu penting pikeun ngajaga kontéks latar.

Popovers

Anggo popovers pikeun nyayogikeun inpormasi subtekstual ka halaman tanpa mangaruhan perenah.

Bootstrap diwangun ku Preboot , hiji pak open-source tina mixins jeung variabel pikeun dipaké babarengan jeung Kurang , a preprocessor CSS pikeun ngembangkeun web gancang sarta gampang.

Parios kumaha kami nganggo Preboot di Bootstrap sareng kumaha anjeun tiasa ngamangpaatkeunana upami anjeun milih ngajalankeun Kurang dina proyék anjeun salajengna.

Kumaha ngagunakeunana

Anggo pilihan ieu pikeun ngamangpaatkeun pinuh ku Bootstrap's Less variables, mixins, and nesting in CSS via javascript in your browser.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="sadayana" /> rel = "stylesheet / kirang" tipe = "téks / css" href = "kirang / bootstrap.less" média = "sadayana" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Teu ngarasa solusi .js? Coba aplikasi Less Mac atawa pake Node.js pikeun ngumpulkeun nalika anjeun nyebarkeun kode anjeun.

Naon kaasup

Ieu sababaraha sorotan naon anu kalebet dina Twitter Bootstrap salaku bagian tina Bootstrap. Lebetkeun kana halaman wéb Bootstrap atanapi halaman proyék Github pikeun ngaunduh sareng diajar langkung seueur.

Variabel warna

Variabel dina Kurang sampurna pikeun ngajaga sareng ngapdet CSS anjeun gratis. Nalika anjeun hoyong ngarobih nilai warna atanapi nilai anu sering dianggo, perbarui dina hiji tempat sareng anjeun parantos nyetél.

// Tumbu
@linkColor : #8b59c2;         
@linkColorHover :     poekeun ( @linkColor , 10 ); 
// Grays
@hideung : #000;             
@grayDark :           lighten ( @hideung , 25 %); 
@abu :               lighten ( @hideung , 50 %); 
@grayLight :          lighten ( @hideung , 70 %); 
@grayLighter :        lighten ( @hideung , 90 %); 
@bodas : #fff;             
// Warna aksen
@biru : #08b5fb;              
@héjo : #46a546;             
@beureum : #9d261d;               
@konéng : #ffc40d;            
@jeruk : #f89406;            
@pink : #c3325f;              
@ungu : #7a43b6;            
// Dasar
@dasar : 20px ;          

Ngoméntaran

Kurang ogé nyadiakeun gaya sejen commenting salian /* ... */sintaksis normal CSS urang.

// Ieu komentar
/* Ieu ogé komentar */

Nyampurkeun wazoo

Campuran dasarna kalebet atanapi sawaréh pikeun CSS, ngamungkinkeun anjeun ngagabungkeun blok kode kana hiji. Éta saé pikeun pasipatan awalan vendor sapertos box-shadow, gradién cross-browser, tumpukan font, sareng seueur deui. Di handap ieu conto tina mixins anu kaasup kana Bootstrap.

tumpukan font

#font {
  . singgetan ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {     
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
  . sans - serif ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {     
    font - kulawarga : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
  . serif ( @beurat : normal , @ukuran : 14px , @lineHeight : 20px ) {     
    font - kulawarga : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
  . monospace ( @beurat : normal , @ukuran : 12px , @lineHeight : 20px ) {     
    font - kulawarga : "Monaco" , Kurir Anyar , monospace ;   
    font - ukuran : @ukuran ; 
    font - beurat : @beurat ; 
    garis - jangkungna : @lineHeight ; 
  }
}

Gradién

#gradién {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    latar - warna : @endColor ; 
    tukang - ulang : ulang - x ;
    tukang - gambar : - khtml - gradién ( linier , kénca luhur , katuhu luhur , ti ( @startColor ), ka ( @endColor )); // Konqueror   
    tukang - gambar : - moz - linier - gradién ( kénca , @startColor , @endColor ); // FF 3.6+    
    tukang - gambar : - ms - linier - gradién ( kénca , @startColor , @endColor ); // IE10    
    tukang - gambar : - webkit - gradién ( linier , kénca luhur , katuhu luhur , warna - eureun ( 0 %, @startColor ), warna - eureun ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tukang - gambar : - webkit - linier - gradién ( kénca , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    tukang - gambar : - o - linier - gradién ( kénca , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d',endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    saringan : e (%( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7 
    tukang - gambar : linier - gradién ( kénca , @startColor , @endColor ); // Le standar   
  }
  . nangtung ( @startColor : #555, @endColor: #333) { 
    latar - warna : @endColor ; 
    tukang - ulang : ulang - x ;
    tukang - gambar : - khtml - gradién ( linier , kénca luhur , kénca handap , ti ( @startColor ), ka ( @endColor )); // Konqueror   
    tukang - gambar : - moz - linier - gradién ( @startColor , @endColor ); // FF 3.6+   
    tukang - gambar : - ms - linier - gradién ( @startColor , @endColor ); // IE10   
    tukang - gambar : - webkit - gradién ( linier , kénca luhur , kénca handap , warna - eureun ( 0 %, @startColor ), warna - eureun ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    tukang - gambar : - webkit - linier - gradién ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    tukang - gambar : - o - linier - gradién ( @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 
    tukang - gambar : linier - gradién ( @startColor , @endColor ); // Standar  
  }
  . arah ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . nangtung - tilu - kelir ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operasi sareng sistem grid

Kéngingkeun sareng laksanakeun sababaraha matematika pikeun ngahasilkeun campuran anu fleksibel sareng kuat sapertos anu di handap ieu.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistim grid
. wadah {
  lebar : @siteWidth ; 
  margin : 0 otomatis ;  
  . clearfix ();
}
. kolom ( @columnSpan : 1 ) {  
  tampilan : inline ; 
  ngambang : ditinggalkeun ;
  rubak : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - kénca : @gridGutterWidth ; 
  &: kahiji - anak {
    margin - kénca : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - kénca : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! penting ;          
}