Sejarah

Pada hari-hari awal Twitter, jurutera menggunakan hampir mana-mana perpustakaan yang mereka kenali untuk memenuhi keperluan bahagian hadapan. Bootstrap bermula sebagai jawapan kepada cabaran yang dibentangkan dan pembangunan yang dipercepatkan dengan pantas semasa Hackweek pertama Twitter.

Dengan bantuan dan maklum balas daripada ramai jurutera di Twitter, Bootstrap telah berkembang dengan ketara untuk merangkumi bukan sahaja gaya asas, tetapi corak reka bentuk bahagian hadapan yang lebih elegan dan tahan lama.

Baca lebih lanjut di dev.twitter.com ›

Sokongan penyemak imbas

Bootstrap diuji dan disokong dalam penyemak imbas moden utama seperti Chrome, Safari, Internet Explorer dan Firefox.

• Safari terkini
• Google Chrome terkini
• Firefox 4+
• Internet Explorer 7+

Apa yang disertakan

Bootstrap dilengkapi dengan CSS terkumpul, tidak tersusun dan templat contoh.

• Semua fail .less asal
• CSS yang disusun sepenuhnya dan diperkecilkan
• Lengkapkan dokumentasi panduan gaya
• Contoh templat halaman (lebih banyak akan datang tidak lama lagi)

Grid lalai

Sistem grid lalai yang disediakan sebagai sebahagian daripada Bootstrap ialah grid 16 lajur lebar 940px. Ia adalah perisa sistem grid 960 yang popular, tetapi tanpa margin/padding tambahan di sebelah kiri dan kanan.

Contoh penanda grid

Seperti yang ditunjukkan di sini, reka letak asas boleh dibuat dengan dua "lajur", setiap satu merangkumi sejumlah 16 lajur asas yang kami takrifkan sebagai sebahagian daripada sistem grid kami. Lihat contoh di bawah untuk lebih banyak variasi.

<div class="row">
  <div class = "span6 lajur" > 
    ...
  </div>
  <div class = "span10 lajur" > 
    ...
  </div>
</div>

Susun atur tetap

Reka letak bekas berpusat 940px lebar asas untuk hampir mana-mana tapak atau halaman.

<badan>
  <div class = "bekas" > 
    ...
  </div>
</body>

Susun atur cecair

Struktur halaman cecair atau cecair yang fleksibel dengan lebar min dan maksimum serta bar sisi sebelah kiri. Hebat untuk apl.

<badan>
  <div class = "bendalir bekas" > 
    <div class = "bar sisi" > 
      ...
    </div>
    <div class = "kandungan" > 
      ...
    </div>
  </div>
</body>

Tajuk dan salinan

Hierarki tipografi standard untuk menstrukturkan halaman web anda.

h1. Tajuk 1

h2. Tajuk 2

h3. Tajuk 3

h4. Tajuk 4

h5. Tajuk 5

h6. Tajuk 6

Contoh perenggan

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.

Contoh tajuk Mempunyai sub-tajuk…

Lain-lain elemen

Menggunakan penekanan, alamat, & singkatan

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

Bila nak guna

Teg penekanan ( <strong>dan <em>) hendaklah digunakan untuk menunjukkan kepentingan tambahan atau penekanan sesuatu perkataan atau frasa berbanding salinan sekelilingnya. Gunakan <strong>untuk kepentingan dan <em>untuk penekanan tekanan .

Penekanan dalam perenggan

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.

Nota: Anda masih boleh menggunakan <b>dan <i>menandai nama dalam HTML5, tetapi ia tidak disertakan dengan gaya yang wujud lagi. <b>bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan, manakala <i>kebanyakannya untuk suara, istilah teknikal, dsb.

Alamat

Unsur <address>ini digunakan untuk maklumat hubungan untuk nenek moyang terdekatnya, atau seluruh badan kerja. Begini rupanya:

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

Nota: Setiap baris dalam a <address>mesti diakhiri dengan pemisah baris ( <br />) atau dibalut dengan tag peringkat blok (cth, <p>) untuk menstruktur kandungan dengan betul.

Singkatan

Untuk singkatan dan akronim, gunakan <abbr>teg ( <acronym>tidak digunakan dalam HTML5 ). Letakkan borang trengkas dalam teg dan tetapkan tajuk untuk nama lengkap.

Sekat petikan

<blockquote> <p> <small>

Cara memetik

Untuk memasukkan petikan blok, bungkus <blockquote>dan <p>tandai <small>. Gunakan <small>elemen untuk memetik sumber anda dan anda akan mendapat sempang em di —hadapannya.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Dr Julius Hibbert

Tidak tertib<ul>

• Lorem ipsum dolor duduk amet
• Consectetur adipiscing elit
• Integer molestie lorem dan massa
• Facilisis dalam pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean duduk amet erat nunc
• Eget porttitor lorem

Tidak bergaya<ul.unstyled>

• Lorem ipsum dolor duduk amet
• Consectetur adipiscing elit
• Integer molestie lorem dan massa
• Facilisis dalam pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean duduk amet erat nunc
• Eget porttitor lorem

Mengarahkan<ol>

1. Lorem ipsum dolor duduk amet
2. Consectetur adipiscing elit
3. Integer molestie lorem dan massa
4. Facilisis dalam pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean duduk amet erat nunc
8. Eget porttitor lorem

Penerangandl

Senarai penerangan

Senarai huraian sesuai untuk menentukan 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.

Membina meja

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

Meja sangat bagus—untuk banyak perkara. Walau bagaimanapun, jadual yang hebat memerlukan sedikit minat markup untuk menjadi berguna, berskala dan boleh dibaca (pada peringkat kod). Berikut adalah beberapa petua untuk membantu.

Sentiasa bungkus pengepala lajur anda dalam <thead>hierarki sedemikian <thead>> <tr>> <th>.

Sama seperti pengepala lajur, semua kandungan kandungan jadual anda hendaklah dibalut dengan <tbody>jadi hierarki anda ialah <tbody>> <tr>> <td>.

Contoh: Gaya jadual lalai

Semua jadual akan digayakan secara automatik dengan hanya sempadan penting untuk memastikan kebolehbacaan dan mengekalkan struktur. Tidak perlu menambah kelas atau atribut tambahan.

#	Nama pertama	Nama terakhir	Bahasa
1	Beberapa	satu	Inggeris
2	Joe	Enam pek	Inggeris
3	Stu	Kemek	Kod

<table class="common-table"> class = "common-table" >
  ...
</ jadual>

Contoh: Belang belang

Dapatkan sedikit kemewahan dengan jadual anda dengan menambahkan jalur zebra—hanya tambah .zebra-stripedkelas.

#	Nama pertama	Nama terakhir	Bahasa
1	Beberapa	satu	Inggeris
2	Joe	Enam pek	Inggeris
3	Stu	Kemek	Kod

Nota: Zebra-striping ialah peningkatan progresif yang tidak tersedia untuk pelayar lama seperti IE8 dan ke bawah.

<table class="common-table zebra-striped"> class = "berjalur kuda belang meja biasa" >
...
</ jadual>

Contoh: Belang zebra dengan TableSorter.js

Mengambil contoh sebelumnya, kami menambah baik kegunaan jadual kami dengan menyediakan fungsi pengisihan melalui jQuery dan pemalam Tablesorter . Klik mana-mana pengepala lajur untuk menukar jenis.

#	Nama pertama	Nama terakhir	Bahasa
1	awak	satu	Inggeris
2	Joe	Enam pek	Inggeris
3	Stu	Kemek	Kod

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<skrip > 
  $ ( fungsi () { 
    $ ( "table#sortTableExample" ). penyusun jadual ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "jalur kuda belang meja biasa" > 
  ...
</ jadual>

Gaya lalai

Semua borang diberikan gaya lalai untuk mempersembahkannya dalam cara yang boleh dibaca dan berskala. Gaya disediakan untuk input teks, senarai pilih, kawasan teks, butang radio dan kotak semak, dan butang.

Contoh bentuk lagenda

Input X-Besar

Pilih

1 2 3 4 5

Pilih

1 2 3 4 5

Input Tidak Boleh Diedit

Beberapa Nilai Di Sini

Input Dilumpuhkan

Input X-Besar

Coretan kecil teks bantuan

Contoh bentuk lagenda

Teks yang Dilengkapkan

@

Kotak Semak yang telah diawali

Kotak semak yang dilampirkan

Input Fail

Contoh bentuk lagenda

Senarai Pilihan

• Pilihan satu ialah ini dan itu—pastikan sertakan sebab ia bagus
• Pilihan dua juga boleh disemak dan dimasukkan dalam keputusan borang
• Pilihan tiga boleh—ya, anda dapat menekanya—juga disemak dan disertakan dalam hasil borang
• Pilihan empat tidak boleh disemak kerana ia dilumpuhkan.

Nota: Label mengelilingi semua pilihan untuk kawasan klik yang lebih besar dan bentuk yang lebih boleh digunakan.

Julat Tarikh

kepada Semua masa ditunjukkan sebagai Waktu Piawai Pasifik (GMT -08:00).

Textarea

Blok teks bantuan untuk menerangkan medan di atas jika perlu.

Senarai Pilihan

• Pilihan satu ialah ini dan itu—pastikan sertakan sebab ia bagus
• Pilihan dua juga boleh disemak dan dimasukkan dalam keputusan borang

Simpan Perubahan  Batal

Borang bertindan

Tambahkan .form-stackedpada HTML borang anda dan anda akan mempunyai label di atas medan mereka dan bukannya di sebelah kirinya. Ini berfungsi dengan baik jika borang anda pendek atau anda mempunyai dua lajur input untuk borang yang lebih berat.

Contoh bentuk lagenda

Input X-Besar

Pilih

1 2 3 4 5

Contoh bentuk lagenda

Input X-Besar

Coretan kecil teks bantuan

Senarai Pilihan

• Pilihan satu ialah ini dan itu—pastikan sertakan sebab ia bagus
• Pilihan dua juga boleh disemak dan dimasukkan dalam keputusan borang

Nota: Label mengelilingi semua pilihan untuk kawasan klik yang lebih besar dan bentuk yang lebih boleh digunakan.

Simpan Perubahan  Batal

Butang

Sebagai konvensyen, butang digunakan untuk tindakan manakala pautan digunakan untuk objek. Sebagai contoh, "Muat turun" boleh menjadi butang dan "aktiviti terkini" boleh menjadi pautan.

Semua butang lalai kepada gaya kelabu muda, tetapi .primarykelas biru tersedia. Selain itu, melancarkan gaya anda sendiri adalah mudah.

Contoh butang

Gaya butang boleh digunakan pada apa-apa sahaja dengan .btnditerapkan. Biasanya anda akan mahu menggunakan ini hanya pada elemen <a>, <button>, dan pilih . <input>Begini rupanya:

Saiz ganti

Inginkan butang yang lebih besar atau lebih kecil? Punyalah!

Keadaan kurang upaya

Untuk butang yang tidak aktif atau dilumpuhkan oleh apl atas satu sebab atau yang lain, gunakan keadaan dilumpuhkan. Itu .disableduntuk pautan dan :disableduntuk <button>elemen.

Pautan

Butang

Apa itu

Bar atas kami ialah bar tetap yang menempatkan logo atau nama tapak web, navigasi utama dan borang carian.

Boleh disesuaikan

Semua elemen dalam, dan keseluruhan bar atas juga, adalah pilihan. Anda boleh memilih untuk memasukkan logo/nama, nav, carian dan nav kedua—atau mana-mana gabungan itu.

Dropdown disertakan

Sebagai sebahagian daripada navigasi utama, kami telah menyertakan keupayaan untuk anda menambah dropdown pada navigasi anda. Semak nav kedua di atas (dijajarkan ke kanan) untuk melihat cara ia dilakukan.

Tab dan pil

Buat navigasi sekunder yang mudah dengan <ul>. Tukar antara tab atau pil dengan menambah kelas yang sesuai.

Hebat untuk sub-bahagian kandungan seperti halaman tetapan akaun kami dan garis masa pengguna untuk menogol antara halaman kandungan serupa. Tersedia dalam gaya tab atau pil.

• Rumah
• Profil
• Mesej
• tetapan
• Kenalan

<ul class="tabs"> kelas = "tab" >
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Mesej </a></li> 
  <li><a href = "#" > Tetapan </a></li> 
  <li><a href = "#" > Kenalan </a></li> 
</ul>

• Rumah
• Profil
• Mesej
• tetapan
• Kenalan

<ul class="pil"> kelas = "pil" >
  <li class = "active" ><a href = "#" > Home </a></li>  
  <li><a href = "#" > Profil </a></li> 
  <li><a href = "#" > Mesej </a></li> 
  <li><a href = "#" > Tetapan </a></li> 
  <li><a href = "#" > Kenalan </a></li> 
</ul>

penomboran

Penomboran ultra ringkas dan gaya minimum yang diilhamkan oleh Rdio. Blok besar sukar untuk dilepaskan, mudah berskala dan menyediakan kawasan klik yang besar.

<div class="pagination"> kelas = "penomboran" >
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Sebelumnya </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 = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

Makluman asas

Mesej satu baris untuk menyerlahkan kegagalan, kemungkinan kegagalan atau kejayaan sesuatu tindakan. Terutamanya berguna untuk borang.

Sekat mesej

Untuk mesej yang memerlukan sedikit penjelasan, kami mempunyai makluman gaya perenggan. Ini adalah sesuai untuk menggelegak mesej ralat yang lebih panjang, memberi amaran kepada pengguna tentang tindakan yang belum selesai, atau hanya menyampaikan maklumat untuk lebih penekanan pada halaman.

modal

Modal—dialog atau peti cahaya—sangat bagus untuk tindakan kontekstual dalam situasi yang penting untuk mengekalkan konteks latar belakang.

Petua Alat

Twipsies sangat berguna untuk membantu pengguna yang keliru dan mengarahkan mereka ke arah yang betul.

Popovers

Gunakan popover untuk memberikan maklumat subtekstual ke halaman tanpa menjejaskan reka letak.

Bootstrap dibina dengan Preboot , pek sumber terbuka campuran dan pembolehubah untuk digunakan bersama Less , prapemproses CSS untuk pembangunan web yang lebih pantas dan mudah.

Lihat cara kami menggunakan Preboot dalam Bootstrap dan cara anda boleh menggunakannya sekiranya anda memilih untuk menjalankan Less pada projek anda yang seterusnya.

Bagaimana untuk menggunakannya

Gunakan pilihan ini untuk menggunakan sepenuhnya pembolehubah Kurang, campuran dan sarang Bootstrap dalam CSS melalui javascript dalam penyemak imbas anda.

<link rel="stylesheet/less" href="less/bootstrap.less" media="semua" /> rel = "stylesheet/less" href = "less/bootstrap.less" media = "semua" />   
<script src = "js/less-1.0.41.min.js" ></script> 

Tidak merasakan penyelesaian .js? Cuba apl Less Mac atau gunakan Node.js untuk menyusun apabila anda menggunakan kod anda.

Apa yang disertakan

Berikut ialah beberapa sorotan perkara yang disertakan dalam Twitter Bootstrap sebagai sebahagian daripada Bootstrap. Pergi ke tapak web Bootstrap atau halaman projek Github untuk memuat turun dan mengetahui lebih lanjut.

Pembolehubah warna

Pembolehubah dalam Kurang sesuai untuk mengekalkan dan mengemas kini CSS anda tanpa sakit kepala. Apabila anda ingin menukar nilai warna atau nilai yang kerap digunakan, kemas kini nilai itu di satu tempat dan anda sudah ditetapkan.

// Pautan
@linkColor : #8b59c2;         
@linkColorHover :     gelapkan ( @linkColor , 10 ); 
// Kelabu
@hitam : #000;             
@grayDark :           cerahkan ( @hitam , 25 %); 
@kelabu :               mencerahkan ( @hitam , 50 %); 
@grayLight :          mencerahkan ( @hitam , 70 %); 
@grayLighter :        mencerahkan ( @hitam , 90 %); 
@putih : #fff;             
// Warna Aksen
@biru : #08b5fb;              
@hijau : #46a546;             
@merah : #9d261d;               
@kuning : #ffc40d;            
@oren : #f89406;            
@merah jambu : #c3325f;              
@ungu : #7a43b6;            
// Garis dasar
@baseline : 20px ;          

Mengulas

Less juga menyediakan satu lagi gaya mengulas sebagai tambahan kepada /* ... */sintaks biasa CSS.

// Ini adalah komen
/* Ini juga komen */

Campurkan wazoo

Mixin pada asasnya termasuk atau separa untuk CSS, membolehkan anda menggabungkan blok kod menjadi satu. Ia bagus untuk sifat awalan vendor seperti box-shadow, kecerunan silang penyemak imbas, susunan fon dan banyak lagi. Di bawah ialah contoh campuran yang disertakan dengan Bootstrap.

Timbunan fon

#font {
  . singkatan ( @berat : biasa , @saiz : 14px , @lineHeight : 20px ) {     
    font - saiz : @saiz ; 
    font - berat : @berat ; 
    garis - ketinggian : @lineHeight ; 
  }
  . sans - serif ( @berat : biasa , @saiz : 14px , @lineHeight : 20px ) {     
    font - keluarga : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - saiz : @saiz ; 
    font - berat : @berat ; 
    garis - ketinggian : @lineHeight ; 
  }
  . serif ( @berat : biasa , @saiz : 14px , @lineHeight : 20px ) {     
    font - keluarga : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - saiz : @saiz ; 
    font - berat : @berat ; 
    garis - ketinggian : @lineHeight ; 
  }
  . monospace ( @berat : biasa , @saiz : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - saiz : @saiz ; 
    font - berat : @berat ; 
    garis - ketinggian : @lineHeight ; 
  }
}

Kecerunan

#gradient {
  . mendatar ( @startColor : #555, @endColor: #333) { 
    latar belakang - warna : @endColor ; 
    latar belakang - ulang : ulang - x ;
    latar belakang - imej : - khtml - kecerunan ( linear , kiri atas , kanan atas , dari ( @startColor ), hingga ( @endColor )); // Penakluk   
    latar belakang - imej : - moz - linear - kecerunan ( kiri , @startColor , @endColor ); // FF 3.6+    
    latar belakang - imej : - ms - linear - kecerunan ( kiri , @startColor , @endColor ); // IE10    
    latar belakang - imej : - webkit - kecerunan ( linear , kiri atas , kanan atas , warna - henti ( 0 %, @startColor ), warna - henti ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    latar belakang - imej : - webkit - linear - kecerunan ( kiri , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    latar belakang - imej : - o - linear - kecerunan ( kiri , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    penapis : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    latar belakang - imej : linear - kecerunan ( kiri , @startColor , @endColor ); // Le standard   
  }
  . menegak ( @startColor : #555, @endColor: #333) { 
    latar belakang - warna : @endColor ; 
    latar belakang - ulang : ulang - x ;
    latar belakang - imej : - khtml - kecerunan ( linear , kiri atas , kiri bawah , dari ( @startColor ), hingga ( @endColor )); // Penakluk   
    latar belakang - imej : - moz - linear - kecerunan ( @startColor , @endColor ); // FF 3.6+   
    latar belakang - imej : - ms - linear - kecerunan ( @startColor , @endColor ); // IE10   
    latar belakang - imej : - webkit - kecerunan ( linear , kiri atas , kiri bawah , warna - henti ( 0 %, @startColor ), warna - henti ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    latar belakang - imej : - webkit - linear - kecerunan ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    latar belakang - imej : - o - linear - kecerunan ( @startColor , @endColor ); // Opera 11.10   
    - ms - penapis : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    penapis : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    latar belakang - imej : linear - kecerunan ( @startColor , @endColor ); // Piawaian  
  }
  . arah ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . menegak - tiga - warna ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Sistem operasi dan grid

Nikmati dan lakukan beberapa matematik untuk menjana campuran yang fleksibel dan berkuasa seperti yang di bawah.

// Griditud
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sistem Grid
. bekas {
  lebar : @siteWidth ; 
  margin : 0 auto ;  
  . clearfix ();
}
. lajur ( @columnSpan : 1 ) {  
  paparan : sebaris ; 
  terapung : kiri ;
  lebar : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - kiri : @gridGutterWidth ; 
  &: pertama - anak {
    jidar - kiri : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - kiri : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! penting ;          
}