Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap adalah toolkit dari Twitter yang dirancang untuk memulai pengembangan aplikasi web dan situs.
Ini termasuk CSS dasar dan HTML untuk tipografi, formulir, tombol, tabel, kisi, navigasi, dan banyak lagi.
Peringatan kutu buku: Bootstrap dibuat dengan Less dan dirancang untuk bekerja di luar gerbang dengan mempertimbangkan browser modern.
Untuk memulai tercepat dan termudah, cukup salin cuplikan ini ke halaman web Anda.
Penggemar menggunakan Less? Tidak masalah, cukup klon repo dan tambahkan baris ini:
Unduh, garpu, tarik, masalah file, dan lainnya dengan repo Bootstrap resmi di Github.
Pada hari-hari awal Twitter, para insinyur menggunakan hampir semua perpustakaan yang mereka kenal untuk memenuhi persyaratan front-end. Bootstrap dimulai sebagai jawaban atas tantangan yang dihadirkan dan pengembangan yang dipercepat dengan cepat selama Hackweek pertama Twitter.
Dengan bantuan dan umpan balik dari banyak insinyur di Twitter, Bootstrap telah berkembang secara signifikan untuk mencakup tidak hanya gaya dasar, tetapi juga pola desain front-end yang lebih elegan dan tahan lama.
Baca selengkapnya di dev.twitter.com
Bootstrap diuji dan didukung di browser modern utama seperti Chrome, Safari, Internet Explorer, dan Firefox.
Bootstrap dilengkapi dengan CSS yang dikompilasi, tidak dikompilasi, dan template contoh.
Sistem grid default yang disediakan sebagai bagian dari Bootstrap adalah grid 16 kolom dengan lebar 940px. Ini adalah rasa dari sistem grid 960 yang populer, tetapi tanpa margin/padding tambahan di sisi kiri dan kanan.
Seperti yang ditunjukkan di sini, tata letak dasar dapat dibuat dengan dua "kolom", masing-masing mencakup sejumlah 16 kolom dasar yang kami definisikan sebagai bagian dari sistem grid kami. Lihat contoh di bawah untuk lebih banyak variasi.
- <div class="baris"> kelas = "baris" >
- <div class = "span6 kolom" >
- ...
- </div>
- <div class = "span10 kolom" >
- ...
- </div>
- </div>
Tata letak wadah dasar dengan lebar 940px dan terpusat untuk hampir semua situs atau halaman.
- <tubuh>
- <div class = "wadah" >
- ...
- </div>
- </tubuh>
Struktur halaman cair atau cair yang fleksibel dengan lebar minimum dan maksimum dan bilah sisi kiri. Bagus untuk aplikasi.
- <tubuh>
- <div class = "container-fluid" >
- <div class = "bilah sisi" >
- ...
- </div>
- <div class = "konten" >
- ...
- </div>
- </div>
- </tubuh>
Hirarki tipografi standar untuk menyusun halaman web Anda.
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>
Penekanan tag ( <strong>
dan <em>
) harus digunakan untuk menunjukkan kepentingan tambahan atau penekanan kata atau frase relatif terhadap salinan sekitarnya. Gunakan <strong>
untuk kepentingan dan <em>
untuk penekanan stres .
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, seorang pharetra augue.
Catatan:<b>
Penggunaan dan tag di HTML5 masih boleh <i>
, tetapi mereka tidak lagi memiliki gaya bawaan. <b>
dimaksudkan untuk menyoroti kata atau frasa tanpa menyampaikan kepentingan tambahan, sementara <i>
sebagian besar untuk suara, istilah teknis, dll.
Elemen <address>
tersebut digunakan untuk informasi kontak untuk leluhur terdekatnya, atau seluruh badan karya. Berikut tampilannya:
Catatan: Setiap baris dalam an <address>
harus diakhiri dengan jeda baris ( <br />
) atau dibungkus dengan tag level blok (misalnya, <p>
) untuk menyusun konten dengan benar.
Untuk singkatan dan akronim, gunakan <abbr>
tag ( <acronym>
sudah tidak digunakan lagi dalam HTML5 ). Letakkan formulir singkatan di dalam tag dan tetapkan judul untuk nama lengkapnya.
<blockquote>
<p>
<small>
<blockquote>
Untuk menyertakan blockquote , bungkus <p>
dan <small>
beri tag. Gunakan <small>
elemen untuk mengutip sumber Anda dan Anda akan mendapatkan tanda hubung em —
sebelum itu.
Lorem ipsum dolor sit amet, conectetur 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>
Tabel sangat bagus—untuk banyak hal. Tabel yang bagus, bagaimanapun, membutuhkan sedikit cinta markup agar berguna, dapat diskalakan, dan dapat dibaca (pada level kode). Berikut adalah beberapa tips untuk membantu.
Selalu bungkus tajuk kolom Anda <thead>
sedemikian rupa sehingga hierarkinya <thead>
> <tr>
> <th>
.
Mirip dengan tajuk kolom, semua konten isi tabel Anda harus dibungkus dengan a <tbody>
sehingga hierarki Anda adalah <tbody>
> <tr>
> <td>
.
Semua tabel akan ditata secara otomatis hanya dengan batas penting untuk memastikan keterbacaan dan mempertahankan struktur. Tidak perlu menambahkan kelas atau atribut tambahan.
# | Nama depan | Nama keluarga | Bahasa |
---|---|---|---|
1 | Beberapa | Satu | Bahasa inggris |
2 | joe | Sixpack | Bahasa inggris |
3 | Stu | Lekuk | Kode |
- <table class = "common-table" >
- ...
- </tabel>
Dapatkan sedikit kemewahan dengan tabel Anda dengan menambahkan zebra-striping—cukup tambahkan .zebra-striped
kelasnya.
# | Nama depan | Nama keluarga | Bahasa |
---|---|---|---|
1 | Beberapa | Satu | Bahasa inggris |
2 | joe | Sixpack | Bahasa inggris |
3 | Stu | Lekuk | Kode |
Catatan: Zebra-striping adalah peningkatan progresif yang tidak tersedia untuk browser lama seperti IE8 dan di bawahnya.
- <table class = "common-table zebra-striped" >
- ...
- </tabel>
Mengambil contoh sebelumnya, kami meningkatkan kegunaan tabel kami dengan menyediakan fungsionalitas pengurutan melalui jQuery dan plugin Tablesorter . Klik tajuk kolom mana pun untuk mengubah pengurutan.
# | Nama depan | Nama keluarga | Bahasa |
---|---|---|---|
1 | Milikmu | Satu | Bahasa inggris |
2 | joe | Sixpack | Bahasa inggris |
3 | Stu | Lekuk | Kode |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skrip >
- $ ( fungsi () {
- $ ( "tabel#sortTableContoh" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </skrip>
- <table class = "common-table zebra-striped" >
- ...
- </tabel>
Semua formulir diberikan gaya default untuk menyajikannya dengan cara yang dapat dibaca dan terukur. Gaya disediakan untuk input teks, daftar pilihan, area teks, tombol radio dan kotak centang, dan tombol.
Tambahkan .form-stacked
ke HTML formulir Anda dan Anda akan memiliki label di atas bidangnya alih-alih di sebelah kirinya. Ini berfungsi dengan baik jika formulir Anda pendek atau Anda memiliki dua kolom input untuk formulir yang lebih berat.
Sebagai konvensi, tombol digunakan untuk tindakan sementara tautan digunakan untuk objek. Misalnya, "Unduh" dapat berupa tombol dan "aktivitas terkini" dapat berupa tautan.
Semua tombol default ke gaya abu-abu muda, tetapi .primary
kelas biru tersedia. Plus, menggulirkan gaya Anda sendiri sangat mudah.
Gaya tombol dapat diterapkan ke apa saja dengan .btn
diterapkan. Biasanya Anda ingin menerapkan ini hanya pada elemen <a>
, <button>
, dan pilih . <input>
Berikut tampilannya:
Ingin tombol yang lebih besar atau lebih kecil? Memiliki itu!
Untuk tombol yang tidak aktif atau dinonaktifkan oleh aplikasi karena satu dan lain alasan, gunakan status dinonaktifkan. Itu .disabled
untuk tautan dan :disabled
untuk <button>
elemen.
Pesan satu baris untuk menyoroti kegagalan, kemungkinan kegagalan, atau keberhasilan suatu tindakan. Sangat berguna untuk formulir.
Untuk pesan yang memerlukan sedikit penjelasan, kami memiliki peringatan gaya paragraf. Ini sempurna untuk memunculkan pesan kesalahan yang lebih panjang, memperingatkan pengguna tentang tindakan yang tertunda, atau hanya menyajikan informasi untuk lebih menekankan pada halaman.
Modals—dialog atau lightbox—sangat bagus untuk tindakan kontekstual dalam situasi di mana konteks latar belakang harus dipertahankan.
Satu tubuh yang bagus…
Twipsi sangat berguna untuk membantu pengguna yang bingung dan mengarahkan mereka ke arah yang benar.
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 quaevoluptas voluptas voluptas voluptas .
Gunakan popover untuk memberikan informasi subtekstual ke halaman tanpa memengaruhi tata letak.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap dibuat dengan Preboot , paket mixin dan variabel sumber terbuka untuk digunakan bersama dengan Less , praprosesor CSS untuk pengembangan web yang lebih cepat dan lebih mudah.
Lihat bagaimana kami menggunakan Preboot di Bootstrap dan bagaimana Anda dapat menggunakannya jika Anda memilih untuk menjalankan Less pada proyek Anda berikutnya.
Gunakan opsi ini untuk memanfaatkan sepenuhnya variabel Less, mixin, dan nesting Bootstrap di CSS melalui javascript di browser Anda.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.0.41.min.js" ></script>
Tidak merasakan solusi .js? Coba aplikasi Less Mac atau gunakan Node.js untuk mengompilasi saat Anda menerapkan kode.
Berikut adalah beberapa highlights dari apa yang termasuk dalam Bootstrap Twitter sebagai bagian dari Bootstrap. Buka situs web Bootstrap atau halaman proyek Github untuk mengunduh dan mempelajari lebih lanjut.
Variabel di Kurang sempurna untuk memelihara dan memperbarui CSS Anda tanpa sakit kepala. Saat Anda ingin mengubah nilai warna atau nilai yang sering digunakan, perbarui di satu tempat dan Anda sudah siap.
- // Tautan
- @linkWarna : #8b59c2;
- @linkColorHover : menggelapkan ( @linkColor , 10 );
- // abu-abu
- @hitam : #000;
- @grayDark : mencerahkan ( @hitam , 25 %);
- @ abu -abu : mencerahkan ( @hitam , 50 %);
- @grayLight : mencerahkan ( @hitam , 70 %);
- @grayLighter : mencerahkan ( @hitam , 90 %);
- @putih : #fff ;
- // Warna Aksen
- @biru : #08b5fb;
- @hijau : #46a546;
- @merah : #9d261d;
- @kuning : #ffc40d;
- @oranye : #f89406;
- @merah muda : #c3325f;
- @ungu : #7a43b6;
- // Dasar
- @baseline : 20px ;
Less juga menyediakan gaya komentar lain selain /* ... */
sintaks normal CSS.
- // Ini adalah komentar
- /* Ini juga komentar */
Mixin pada dasarnya termasuk atau sebagian untuk CSS, memungkinkan Anda untuk menggabungkan blok kode menjadi satu. Mereka bagus untuk properti awalan vendor seperti box-shadow
, gradien lintas-browser, tumpukan font, dan banyak lagi. Di bawah ini adalah contoh mixin yang disertakan dengan Bootstrap.
- #font {
- . singkatan ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - ukuran : @size ;
- font - berat : @ berat ;
- garis - tinggi : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - ukuran : @size ;
- font - berat : @ berat ;
- garis - tinggi : @lineHeight ;
- }
- . serif ( @berat : normal , @ukuran : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- font - ukuran : @size ;
- font - berat : @ berat ;
- garis - tinggi : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- font - ukuran : @size ;
- font - berat : @ berat ;
- garis - tinggi : @lineHeight ;
- }
- }
- #gradien {
- . horizontal ( @startColor : #555, @endColor: #333) {
- latar belakang - warna : @endColor ;
- latar belakang - ulangi : ulangi - x ;
- latar belakang - gambar : - khtml - gradien ( linier , kiri atas , kanan atas , dari ( @startColor ), ke ( @endColor )); // penakluk
- latar belakang - gambar : - moz - linier - gradien ( kiri , @startColor , @endColor ); // FF 3.6+
- latar belakang - gambar : - ms - linier - gradien ( kiri , @startColor , @endColor ); // IE10
- background - gambar : - webkit - gradien ( linier , kiri atas , kanan atas , warna - stop ( 0 %, @startColor ), warna - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - gambar : - webkit - linear - gradien ( kiri , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - gambar : - o - linear - gradient ( kiri , @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
- latar belakang - gambar : linier - gradien ( kiri , @startColor , @endColor ); // standar
- }
- . vertikal ( @startColor : #555, @endColor: #333) {
- latar belakang - warna : @endColor ;
- latar belakang - ulangi : ulangi - x ;
- latar belakang - gambar : - khtml - gradien ( linier , kiri atas , kiri bawah , dari ( @startColor ), ke ( @endColor )); // penakluk
- latar belakang - gambar : - moz - linier - gradien ( @startColor , @endColor ); // FF 3.6+
- latar belakang - gambar : - ms - linier - gradien ( @startColor , @endColor ); // IE10
- background - gambar : - webkit - gradien ( linear , kiri atas , kiri bawah , warna - stop ( 0 %, @startColor ), warna - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- latar belakang - gambar : - webkit - linier - gradien ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- latar belakang - gambar : - o - linier - gradien ( @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
- latar belakang - gambar : linier - gradien ( @startColor , @endColor ); // Standar
- }
- . arah ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikal - tiga - warna ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Jadilah mewah dan lakukan beberapa matematika untuk menghasilkan mixin yang fleksibel dan kuat seperti di bawah ini.
- //Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Sistem Grid
- . wadah {
- lebar : @siteWidth ;
- margin : 0 otomatis ;
- . clearfix ();
- }
- . kolom ( @columnSpan : 1 ) {
- tampilan : sebaris ;
- mengapung : kiri ;
- lebar : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- margin - kiri : @gridGutterWidth ;
- &: pertama - anak {
- margin - kiri : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- margin - kiri : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! penting ;
- }