Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum dan eros.
Bootstrap ialah kit alat daripada Twitter yang direka untuk memulakan pembangunan aplikasi web dan tapak.
Ia termasuk CSS asas dan HTML untuk tipografi, borang, butang, jadual, grid, navigasi dan banyak lagi.
Makluman Nerd: Bootstrap dibina dengan Less dan direka bentuk untuk bekerja di luar pintu dengan mengambil kira penyemak imbas moden.
Untuk permulaan yang paling cepat dan mudah, hanya salin coretan ini ke halaman web anda.
Peminat menggunakan Less? Tiada masalah, hanya klon repo dan tambah baris ini:
Muat turun, garpu, tarik, isu fail dan banyak lagi dengan repo Bootstrap rasmi di Github.
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 ›
Bootstrap diuji dan disokong dalam penyemak imbas moden utama seperti Chrome, Safari, Internet Explorer dan Firefox.
Bootstrap dilengkapi dengan CSS terkumpul, tidak tersusun dan templat contoh.
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.
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 = "baris" >
- <div class = "span6 lajur" >
- ...
- </div>
- <div class = "span10 lajur" >
- ...
- </div>
- </div>
Reka letak berpusat 940px lebar lalai dan ringkas untuk hampir mana-mana tapak web atau halaman yang disediakan oleh satu <div.container>
.
- <badan>
- <div class = "bekas" >
- ...
- </div>
- </body>
Struktur halaman bendalir alternatif yang fleksibel dengan lebar min dan maks serta bar sisi sebelah kiri. Hebat untuk apl dan dokumen.
- <badan>
- <div class = "bendalir bekas" >
- <div class = "bar sisi" >
- ...
- </div>
- <div class = "kandungan" >
- ...
- </div>
- </div>
- </body>
Hierarki tipografi standard untuk menstrukturkan halaman web anda.
Keseluruhan grid tipografi adalah berdasarkan dua Kurang pembolehubah dalam fail preboot.less kami: @basefont
dan @baseline
. Yang pertama ialah saiz fon asas yang digunakan sepanjang dan yang kedua ialah ketinggian garis asas.
Kami menggunakan pembolehubah tersebut, dan beberapa matematik, untuk mencipta jidar, pelapik dan ketinggian garis semua jenis kami dan banyak lagi.
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.
Menggunakan penekanan, alamat, & singkatan
<strong>
<em>
<address>
<abbr>
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 .
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>
teg dalam HTML5 dan mereka tidak perlu digayakan tebal dan condong, masing-masing (walaupun jika terdapat unsur yang lebih semantik, gunakannya). <b>
bertujuan untuk menyerlahkan perkataan atau frasa tanpa menyampaikan kepentingan tambahan, manakala <i>
kebanyakannya untuk suara, istilah teknikal, dsb.
Unsur <address>
ini digunakan untuk maklumat hubungan untuk nenek moyang terdekatnya, atau seluruh badan kerja. Begini rupanya:
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.
Untuk singkatan dan akronim, gunakan <abbr>
teg ( <acronym>
tidak digunakan dalam HTML5 ). Letakkan borang trengkas dalam teg dan tetapkan tajuk untuk nama lengkap.
<blockquote>
<p>
<small>
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
<ul>
<ul.unstyled>
<ol>
dl
<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>
.
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 |
- <jadual>
- ...
- </ jadual>
Dapatkan sedikit kemewahan dengan jadual anda dengan menambahkan jalur zebra—hanya tambah .zebra-striped
kelas.
# | 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 = "belang kuda belang" >
- ...
- </ jadual>
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>
- <skrip >
- $ ( fungsi () {
- $ ( "table#sortTableExample" ). penyusun jadual ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "belang kuda belang" >
- ...
- </ jadual>
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.
Tambahkan .form-stacked
pada 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.
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 beberapa kelas berfungsi boleh digunakan untuk gaya warna yang berbeza. Kelas ini termasuk kelas biru .primary
, kelas biru muda .info
, kelas hijau .success
dan kelas merah .danger
. Selain itu, melancarkan gaya anda sendiri adalah mudah.
Gaya butang boleh digunakan pada apa-apa sahaja dengan .btn
diterapkan. Biasanya anda akan mahu menggunakan ini hanya pada elemen <a>
, <button>
, dan pilih . <input>
Begini rupanya:
Inginkan butang yang lebih besar atau lebih kecil? Punyalah!
Untuk butang yang tidak aktif atau dilumpuhkan oleh apl atas satu sebab atau yang lain, gunakan keadaan dilumpuhkan. Itu .disabled
untuk pautan dan :disabled
untuk <button>
elemen.
div.alert-message
Mesej satu baris untuk menyerlahkan kegagalan, kemungkinan kegagalan atau kejayaan sesuatu tindakan. Terutamanya berguna untuk borang.
div.alert-message.block-message
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—dialog atau peti cahaya—sangat bagus untuk tindakan kontekstual dalam situasi yang penting untuk mengekalkan konteks latar belakang.
Satu badan yang baik…
Twipsies sangat berguna untuk membantu pengguna yang keliru dan mengarahkan mereka ke arah yang betul.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo volupremtas quasi fugit fugit , totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo volupremtis quasi fugit voluptate.
Gunakan popover untuk memberikan maklumat subtekstual ke halaman tanpa menjejaskan reka letak.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum dan eros.
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.
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" />
- <script src = "js/less-1.1.3.min.js" ></script>
Tidak merasakan penyelesaian .js? Cuba apl Less Mac atau gunakan Node.js untuk menyusun apabila anda menggunakan kod anda.
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 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;
- // Grid garis dasar
- @basefont : 13px ;
- @baseline : 18px ;
Less juga menyediakan satu lagi gaya mengulas sebagai tambahan kepada /* ... */
sintaks biasa CSS.
- // Ini adalah komen
- /* Ini juga komen */
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.
- #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 ;
- }
- }
- #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
- 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
- latar belakang - imej : linear - kecerunan ( @startColor , @endColor ); // Piawaian
- }
- . arah ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . menegak - tiga - warna ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Nikmati dan lakukan beberapa matematik untuk menjana campuran yang fleksibel dan berkuasa seperti yang di bawah.
- // Griditud
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Sistem Grid
- . bekas {
- lebar : @siteWidth ;
- margin : 0 auto ;
- . clearfix ();
- }
- . lajur ( @columnSpan : 1 ) {
- lebar : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- jidar - kiri : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }