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

Anda juga boleh menambah subtajuk dengan <strong>dan<em>

Lain-lain elemen

Menggunakan penekanan, alamat, & singkatan

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

Bila nak guna

Teg penekanan ( <strong>dan <em>) hendaklah digunakan untuk menambah perbezaan visual antara perkataan atau frasa dan salinan sekelilingnya. Gunakan <strong>untuk perhatian lama biasa dan <em>untuk perhatian dan tajuk yang licik .

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.

Alamat

Unsur addressini digunakan untuk—anda dapat menekanya!—alamat. Begini rupanya:

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

Nota: Setiap baris dalam addressmesti diakhiri dengan pemisah baris ( <br />) untuk menstruktur kandungan dengan betul kerana ia dibaca dalam kehidupan sebenar tanpa sebarang gaya digunakan.

Singkatan

Untuk singkatan dan akronim, gunakan abbrteg ( acronymtidak digunakan dalam HTML5 ). Letakkan borang trengkas dalam teg dan tetapkan tajuk untuk nama lengkap.

Sekat petikan

<blockquote> <p> <cite>

Pastikan anda membungkus blockquotedan paragraphtanda nama anda cite. Apabila memetik sumber, gunakan citeelemen tersebut. CSS akan secara automatik mendahului nama dengan sengkang em (—).

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

Dr Julius Hibbert

Tidak tertib<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Rakan Sepasukan Saya
  • George Castanza
  • Jerry Seinfeld
  • Kosmo Kramer
  • Elaine Bennis
  • Lelaki Baru
• John Jacob
• Paul Pierce
• Kevin Garnett

Tidak bergaya<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Rakan Sepasukan Saya
  • George Castanza
  • Jerry Seinfeld
  • Kosmo Kramer
  • Elaine Bennis
  • Lelaki Baru
• John Jacob
• Paul Pierce
• Kevin Garnett

Mengarahkan<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Rakan Sepasukan Saya
   1. George Castanza
   2. Jerry Seinfeld
   3. Kosmo Kramer
   4. Elaine Bennis
   5. Lelaki Baru
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

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 theadhierarki sedemikian thead> tr> th.

Sama seperti pengepala lajur, semua kandungan kandungan jadual anda hendaklah dibalut dengan tbodyjadi 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" >
  ...
</table>

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

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

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 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 ). sedia ( fungsi () { 
    $ ( "table#sortTableExample" ). penyusun jadual ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "jalur kuda belang meja biasa" > 
  ...
</table>

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

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. Lazimnya anda mahu menggunakan ini pada elemen a, button, dan pilih sahaja. inputBegini 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 buttonelemen.

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.

Popovers

Gunakan popover untuk memberikan maklumat subtekstual ke halaman tanpa mempengaruhi 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" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "semua" />    
<script type = "text/javascript" 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 merentas penyemak imbas, tindanan 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) { 
    ...
  }
}

Operasi dan sistem 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 ;          
}