Unduh Bootstrap

Bootstrap memiliki beberapa cara mudah untuk memulai dengan cepat, masing-masing menarik keterampilan berbeda tingkat dan use case. Membaca untuk melihat apa yang cocok untuk Anda khusus kebutuhan.

Compiled CSS, JS, and fonts

Cara tercepat untuk mendapatkan Bootstrap adalah untuk men-download versi terkompilasi yang dikemas dan minified CSS, JavaScript, dan font. Tidak ada dokumentasi atau file kode sumber asli juga disertakan.

Unduh precompiled Bootstrap

Tambahan unduh

Unduh source code

Dapatkan kode sumber terbaru Bootstrap kurang dan JavaScript dengan men-download langsung dari GitHub.

Clone or fork via GitHub

Kunjungi kami di GitHub untuk klon atau garpu Bootstrap proyek.

Install with Bower

Memasang dan mengelola Bootstrap's gaya, JavaScript, dan menggunakan dokumentasi Bower.

$ bower install bootstrap

Bootstrap CDN

The folks over at MaxCDN Anggun menyediakan dukungan CDN untuk Bootstrap's CSS dan JavaScript. Hanya menggunakan ini Bootstrap CDN links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

Compiling Bootstrap's LESS files

Jika Anda bekerja dengan kode sumber uncompiled Bootstrap's, Anda harus mengkompilasi file kurang untuk menghasilkan file CSS yang dapat digunakan. Untuk mengkompilasi file kurang ke CSS, kami hanya secara resmi mendukung Recess, Twitter's CSS hinter didasarkan pada less.js.

What's included

Bootstrap di-download dalam dua bentuk, di mana Anda akan menemukan direktori berikut dan file, logis pengelompokan sumber daya Umum dan menyediakan kedua disusun dan minified variasi.

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

Precompiled Bootstrap

Setelah download, unzip folder dikompresi untuk melihat struktur (disusun) Bootstrap. Anda akan melihat sesuatu seperti ini:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff

Ini adalah bentuk paling dasar Bootstrap: precompiled file untuk cepat drop-in penggunaan di hampir setiap proyek web. Kami menyediakan dikompilasi CSS dan JS (bootstrap.*), juga sebagai dikompilasi dan minified CSS dan JS (bootstrap.min.*). Font dari Glyphicons disertakan, seperti tema Bootstrap opsional.

Bootstrap source code

Download kode sumber Bootstrap mencakup aset Installation CSS, JavaScript, dan font, bersama dengan sumber kurang, JavaScript, dan dokumentasi. Lebih khusus lagi, itu mencakup berikut dan lebih lanjut:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
├── docs-assets/
├── examples/
└── *.html

The less/, js/, and fonts/ Apakah kode sumber untuk CSS, JS, dan ikon font (masing-masing). The dist/ folder meliputi segala sesuatu yang tercantum dalam bagian Installation download di atas. docs-assets/, examples/, dan semua *.html file ini adalah untuk dokumentasi kami. Selain itu, file lainnya termasuk menyediakan dukungan untuk paket, informasi lisensi dan pengembangan.

Basic template

Mulai dengan template HTML dasar ini, atau memodifikasi contoh-contoh ini. Kami berharap Anda akan menyesuaikan template dan contoh, kami mengadaptasinya sesuai dengan kebutuhan Anda.

Copy HTML di bawah ini untuk mulai bekerja dengan dokumen Bootstrap minimal.

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Examples

Membangun template dasar di atas dengan Bootstrap's banyak komponen. Lihat juga Menyesuaikan Bootstrap untuk kiat tentang merawat varian Bootstrap Anda sendiri.

Starter template

Tidak ada tapi dasar-dasar: dikompilasi CSS dan JavaScript dengan sebuah wadah.

Grids

Beberapa contoh dari grid layout dengan semua empat tingkatan, bersarang, dan banyak lagi.

Jumbotron

Membangun sekitar jumbotron dengan navbar dan beberapa kolom dasar grid.

Narrow jumbotron

Membangun halaman lebih kustom oleh penyempitan default wadah dan jumbotron.

Navbar

Super dasar template yang mencakup navbar bersama dengan beberapa konten tambahan.

Static top navbar

Super dasar template dengan navbar atas statis bersama dengan beberapa konten tambahan.

Fixed navbar

Super dasar template dengan navbar atas tetap bersama dengan beberapa konten tambahan.

Sign-in page

Bentuk kustom layout dan desain untuk tanda sederhana dalam bentuk.

Sticky footer

Melampirkan footer ke bagian bawah viewport ketika konten lebih pendek dari itu.

Sticky footer with navbar

Melampirkan footer ke bagian bawah viewport dengan navbar tetap di bagian atas.

Justified nav

Membuat navbar kustom dengan link yang dibenarkan. Kepala up! Tidak terlalu ramah WebKit.

Offcanvas

Membangun toggleable off-kanvas navigasi menu untuk digunakan dengan Bootstrap.

Carousel

Menyesuaikan navbar dan korsel, kemudian tambahkan beberapa komponen baru.

Non-responsive Bootstrap

Dengan mudah menonaktifkan respon dari Bootstrap per docs kami.

Bootstrap theme

Beban tema Bootstrap opsional untuk pengalaman visual ditingkatkan.

Menonaktifkan responsif

Bootstrap secara otomatis menyesuaikan halaman Anda untuk berbagai ukuran layar. Berikut adalah cara untuk menonaktifkan fitur ini sehingga halaman Anda berfungsi seperti contoh ini non-responsif.

Langkah-langkah untuk menonaktifkan halaman responsif

  1. Menghilangkan viewport <meta> disebutkan dalam CSS docs
  2. Menimpa width pada .container untuk setiap tingkatan grid dengan lebar tunggal, misalnya width: 970px !important; Pastikan bahwa ini datang setelah default Bootstrap CSS. Anda opsional dapat menghindari !important dengan media queries atau beberapa selector-fu.
  3. Jika menggunakan navbars, Hapus semua navbar runtuh dan memperluas perilaku.
  4. Untuk grid layout, gunakan .col-xs-* kelas Selain, atau di tempat, menengah dan besar yang. Jangan khawatir, timbangan grid perangkat ekstra kecil untuk semua resolusi.

Anda masih perlu Respond.js untuk IE8 (karena kami pertanyaan media masih ada dan diproses). Ini menonaktifkan aspek "situs mobile" Bootstrap.

Bootstrap template dengan responsif dinonaktifkan

Kami telah menerapkan langkah-langkah ini untuk contoh. Baca kode sumbernya untuk melihat perubahan tertentu diterapkan.

Lihat contoh non-responsif

Migrasi dari 2.x ke 3.0

Bootstrap 3 ini tidak kompatibel dengan v2.x. Gunakan bagian ini sebagai panduan umum untuk melakukan upgrade dari v2.x ke v3.0. Untuk gambaran yang lebih luas, lihat Apa yang baru dalam pengumuman rilis v3.0.

Perubahan utama kelas

Tabel ini menunjukkan perubahan gaya antara v2.x dan v3.0.

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.nav-collapse .navbar-collapse
.nav-toggle .navbar-toggle
.btn-navbar .navbar-btn
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.alert-error .alert-danger
.visible-phone .visible-xs
.visible-tablet .visible-sm
.visible-desktop Split into .visible-md .visible-lg
.hidden-phone .hidden-xs
.hidden-tablet .hidden-sm
.hidden-desktop Split into .hidden-md .hidden-lg
.input-small .input-sm
.input-large .input-lg
.control-group .form-group
.control-group.warning .control-group.error .control-group.success .form-group.has-*
.checkbox.inline .radio.inline .checkbox-inline .radio-inline
.input-prepend .input-append .input-group
.add-on .input-group-addon
.img-polaroid .img-thumbnail
ul.unstyled .list-unstyled
ul.inline .list-inline
.muted .text-muted
.text-error .text-danger
.table .error .table .danger
.bar .progress-bar
.bar-* .progress-bar-*
.accordion .panel-group
.accordion-group .panel .panel-default
.accordion-heading .panel-heading
.accordion-body .panel-collapse
.accordion-inner .panel-body

Apa yang baru

Kami telah menambahkan elemen baru dan mengubah beberapa yang sudah ada. Berikut adalah gaya baru atau diperbarui.

Element Description
Panels .panel .panel-default .panel-body .panel-title .panel-heading .panel-footer .panel-collapse
List groups .list-group .list-group-item .list-group-item-text .list-group-item-heading
Glyphicons .glyphicon
Jumbotron .jumbotron
Extra small grid (<768px) .col-xs-*
Small grid (≥768px) .col-sm-*
Medium grid (≥992px) .col-md-*
Large grid (≥1200px) .col-lg-*
Responsive utility classes (≥1200px) .visible-lg .hidden-lg
Offsets .col-sm-offset-* .col-md-offset-* .col-lg-offset-*
Push .col-sm-push-* .col-md-push-* .col-lg-push-*
Pull .col-sm-pull-* .col-md-pull-* .col-lg-pull-*
Input groups .input-group .input-group-addon .input-group-btn
Form controls .form-control .form-group
Button group sizes .btn-group-xs .btn-group-sm .btn-group-lg
Navbar text .navbar-text
Navbar header .navbar-header
Justified tabs / pills .nav-justified
Responsive images .img-responsive
Contextual table rows .success .danger .warning .active
Contextual panels .panel-success .panel-danger .panel-warning .panel-info
Modal .modal-dialog .modal-content
Thumbnail image .img-thumbnail
Well sizes .well-sm .well-lg
Alert links .alert-link

Apa yang akan dihapus

Unsur-unsur berikut telah menjatuhkan atau berubah dalam v3.0.

Element Removed from 2.x 3.0 Equivalent
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Keberpihakan tab .tabs-left .tabs-right .tabs-below N/A
Daftar NAV .nav-list .nav-header Setara, tetapi tidak langsung Daftar grup and .panel-groups are similar.

Catatan tambahan

Perubahan lain dalam v3.0 tidak segera jelas. Kelas dasar, gaya utama dan perilaku telah disesuaikan untuk fleksibilitas dan kami Mobile pertama pendekatan. Berikut adalah sebagian daftar:

  • Secara default, bentuk berbasis teks kontrol sekarang menerima hanya sedikit styling. Untuk fokus warna dan sudut lengkung, berlaku .form-control kelas pada elemen gaya.
  • Formulir berbasis teks kontrol dengan .form-control kelas diterapkan sekarang adalah 100% lebar secara default. Bungkus masukan dalam <div class="col-*"></div> untuk mengontrol input lebar.
  • .badge tidak lagi memiliki kontekstual (-success,-primary,etc..) kelas.
  • .btn juga harus menggunakan .btn-default untuk mendapatkan "default" tombol.
  • .container and .row yang sekarang cairan (berbasis persentase).
  • Gambar tidak responsif secara default. Penggunaan .img-responsive untuk cairan <img> size.
  • Ikon, sekarang .glyphicon, Apakah sekarang font berbasis. Ikon juga memerlukan kelas dasar dan ikon (e.g. .glyphicon .glyphicon-asterisk).
  • Typeahead telah turun, mendukung menggunakan Twitter Typeahead.
  • Modal markup telah berubah secara signifikan. The .modal-header, .modal-body, dan .modal-footer Bagian sekarang dibungkus .modal-content dan .modal-dialog untuk lebih baik styling mobile dan perilaku.
  • HTML dimuat oleh remote modal pilihan sekarang disuntikkan ke .modal Alih-alih ke .modal-body. Hal ini memungkinkan Anda untuk juga mudah bervariasi header dan footer dari modal, bukan hanya tubuh modal.
  • Aktivitas JavaScript yang ber-namespace. Misalnya, untuk menangani acara "Tampilkan" modal, gunakan 'show.bs.modal'. Tab "menunjukkan" penggunaan 'shown.bs.tab', etc.

Untuk informasi lebih lanjut tentang upgrade ke v3.0, dan potongan kode dari masyarakat, lihat Bootply.

Dukungan browser

Bootstrap dibangun untuk bekerja terbaik di Pemesanan desktop dan mobile browser, artinya peramban lama mungkin menampilkan berbeda gaya, meskipun sepenuhnya fungsional, rendering komponen tertentu.

Browser yang didukung

Secara khusus, kami mendukung versi terbaru dari berikut:

  • Chrome (Mac, Windows, iOS, and Android)
  • Safari (Mac and iOS only, as the Windows version is being abandoned)
  • Firefox (Mac, Windows)
  • Internet Explorer
  • Opera (Mac, Windows)

Secara tidak resmi, Bootstrap harus melihat dan berperilaku cukup baik di Kromium dan Chrome untuk Linux, Firefox untuk Linux, dan Internet Explorer 7, meskipun mereka tidak secara resmi didukung.

Internet Explorer 8 dan 9

Internet Explorer 8 dan 9 juga didukung, namun, perlu diketahui bahwa beberapa properti CSS3 dan HTML5 elemen tidak sepenuhnya didukung oleh browser ini. Sebagai tambahan Internet Explorer 8 memerlukan penggunaan Respond.js untuk mengaktifkan dukungan query media.

Feature Internet Explorer 8 Internet Explorer 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

Visit Can I use... for details on browser support of CSS3 and HTML5 features.

Internet Explorer 8 dan Respond.js

Waspadalah terhadap peringatan berikut bila menggunakan Respond.js di lingkungan Anda pengembangan dan produksi untuk Internet Explorer 8.

Respond.js dan CSS lintas domain

Menggunakan Respond.js dengan CSS yang di-host pada domain yang berbeda (sub) (misalnya, di sebuah CDN) memerlukan beberapa pengaturan tambahan. See the Respond.js docs for details.

Respond.js and file://

Karena browser keamanan aturan, Respond.js tidak bekerja dengan halaman yang dilihat melalui file:// protokol (seperti ketika membuka sebuah file HTML lokal). Untuk menguji fitur responsif di IE8, lihat halaman Anda melalui HTTP (S). Lihat Respond.js docs untuk rincian.

Respond.js and @import

Respond.js tidak bekerja dengan CSS yang dirujuk melalui @import. In particular, some Drupal configurations are known to use @import. Lihat Respond.js docs untuk rincian.

Internet Explorer 8 dan kotak-ukuran

IE8 tidak sepenuhnya mendukung box-sizing: border-box; Ketika dikombinasikan dengan min-width, max-width, min-height, atau max-height. Untuk alasan itu, seperti v3.0.1, kita tidak lagi menggunakan max-width pada .containers.

Mode kompatibilitas IE

Bootstrap tidak didukung dalam mode kompatibilitas Internet Explorer tua. Untuk memastikan Anda menggunakan mode rendering terbaru untuk IE, pertimbangkan termasuk yang sesuai <meta> Tag di halaman Anda:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Tag ini sudah termasuk dalam semua halaman dokumentasi dan contoh-contoh untuk memastikan yang terbaik render mungkin dalam setiap didukung versi Internet Explorer.

Lihat pertanyaan StackOverflow ini untuk informasi lebih lanjut.

Internet Explorer 10 di Windows 8 dan Windows Phone 8

Internet Explorer 10 tidak membedakan lebar perangkat dari viewport lebar, dan karenanya tidak benar berlaku media queries di Bootstrap's CSS. Biasanya Anda akan menambahkan potongan cepat CSS untuk memperbaikinya:

@-ms-viewport       { width: device-width; }

Namun, ini tidak bekerja karena menyebabkan Windows Phone 8 perangkat untuk menunjukkan pandangan sebagian besar desktop bukan pandangan sempit "telepon". Untuk mengatasi masalah ini, Anda akan perlu untuk meliputi berikut CSS dan JavaScript untuk bekerja di sekitar bug sampai Microsoft masalah memperbaiki.

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement("style")
  msViewportStyle.appendChild(
    document.createTextNode(
      "@-ms-viewport{width:auto!important}"
    )
  )
  document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

Untuk informasi lebih lanjut dan pedoman penggunaan, membaca Windows Phone 8 and Device-Width.

Sebagai kepala atas, kita memasukkan ini dalam dokumen Bootstrap sebagai contoh.

Safari persen pembulatan

Safari v6.1 untuk OS X dan Safari untuk iOS v7.0.1, mesin rendering Safari memiliki beberapa masalah dengan jumlah desimal yang digunakan dalam kami .col-*-1 kelas grid. Jadi jika Anda memiliki 12 individu grid kolom, Anda akan melihat bahwa mereka datang pendek dibandingkan dengan lain baris kolom. Kita tidak bisa berbuat banyak di sini (lihat #9282) Tapi Anda memiliki beberapa pilihan:

  • Tambah .pull-right untuk kolom grid Anda terakhir untuk mendapatkan penyelarasan kan keras
  • Men-tweak persentase keuntungan Anda secara manual untuk mendapatkan yang sempurna pembulatan untuk Safari (lebih sulit daripada pilihan pertama)

Kami akan terus mengawasi ini meskipun dan memperbarui kode kita jika kita memiliki solusi yang mudah.

Modal dan perangkat mobile

Melimpah dan bergulir

Dukungan untuk overflow: hidden pada <body> elemen sangat terbatas di iOS dan Android. Untuk itu, bila Anda menggulir melewati bagian atas atau bawah dari modal di salah satu browser perangkat-perangkat tersebut, <body> konten akan mulai gulir.

Keyboard virtual

Juga, perhatikan bahwa jika Anda menggunakan input dalam modal Anda – iOS memiliki bug render yang tidak memperbarui posisi elemen tetap ketika virtual keyboard dipicu. Beberapa workarounds untuk ini termasuk mengubah elemen Anda untuk position: absolute atau menerapkan timer fokus untuk mencoba memperbaiki posisi secara manual. Ini tidak ditangani oleh Bootstrap, jadi terserah Anda untuk memutuskan mana solusi terbaik untuk aplikasi Anda.

Browser zoom

Halaman zoom pasti menyajikan render artefak dalam beberapa komponen, baik dalam Bootstrap dan seluruh web. Tergantung pada masalah, kita dapat memperbaikinya (pencarian pertama dan kemudian buka masalah jika perlu). Namun, kita cenderung untuk mengabaikan ini karena mereka sering memiliki tidak ada solusi langsung selain hacky workarounds.

Dukungan pihak ketiga

Sementara kita tidak resmi mendukung setiap plugin pihak ketiga atau Pengaya, kami menawarkan beberapa saran yang berguna untuk membantu menghindari masalah potensial dalam proyek Anda.

Mengatakan kotak-ukuran

Beberapa ketiga pihak perangkat lunak, termasuk Google Maps dan Google Custom Search Engine, bertentangan dengan Bootstrap karena * { box-sizing: border-box; }, aturan yang membuatnya begitu padding tidak mempengaruhi lebar dihitung akhir elemen. Pelajari lebih lanjut tentang kotak model dan ukuran di CSS Trik.

Tergantung pada konteksnya, Anda mungkin menimpa yang dibutuhkan (opsi 1) atau me-reset kotak-ukuran seluruh kawasan (opsi 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled LESS formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap LESS mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom LESS mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Accessibility

Bootstrap mengikuti umum web standar, dan dengan sedikit usaha ekstra, dapat digunakan untuk membuat situs yang dapat diakses oleh mereka yang menggunakan AT.

Lewati Navigasi

Jika navigasi Anda berisi banyak link dan datang sebelum konten utama dalam DOM, menambahkan Skip to main content link immediately after your opening <body> tag. (read why)

<body>
  <a href="#content" class="sr-only">Skip to main content</a>
  <div class="container" id="content">
    The main page content.
  </div>
</body>

Judul bersarang

Ketika bersarang judul (<h1> - <h6>), header dokumen utama Anda harus <h1>. Judul berikutnya harus membuat penggunaan Logis <h2> - <h6> sedemikian rupa sehingga pembaca layar dapat membangun daftar isi untuk laman.

Pelajari lebih lanjut di HTML CodeSniffer dan Penn State's AccessAbility.

Sumber daya tambahan

Lisensi FAQ

Bootstrap dirilis di bawah lisensi Apache 2 dan hak cipta 2015 Twitter. Direbus sampai ke potongan-potongan yang lebih kecil, itu dapat digambarkan dengan kondisi berikut.

Hal ini memungkinkan Anda untuk:

  • Bebas download dan gunakan Bootstrap, secara keseluruhan atau sebagian, untuk pribadi, perusahaan internal atau untuk tujuan komersial
  • Menggunakan Bootstrap dalam paket atau distribusi yang Anda buat

Itu melarang Anda untuk:

  • Mendistribusikan setiap bagian dari Bootstrap tanpa atribusi yang tepat
  • Menggunakan setiap merek yang dimiliki oleh Twitter dengan cara apapun yang mungkin menyatakan atau menyiratkan bahwa mendukung Twitter distribusi Anda
  • Menggunakan setiap merek yang dimiliki oleh Twitter dengan cara apapun yang mungkin menyatakan atau menyiratkan bahwa Anda menciptakan Twitter software di pertanyaan

Memerlukan Anda untuk:

  • Sertakan salinan lisensi di semua redistribusi yang Anda dapat membuat yang mencakup Bootstrap
  • Menyediakan jelas atribusi ke kericau untuk setiap distribusi yang mencakup Bootstrap

Tidak memerlukan Anda untuk:

  • Termasuk sumber Bootstrap itu sendiri, atau modifikasi apapun Anda mungkin telah membuat untuk itu, dalam semua redistribusi Anda dapat berkumpul itu termasuk itu
  • Mengirimkan perubahan yang Anda buat untuk Bootstrap kembali untuk Bootstrap proyek (meskipun umpan balik seperti itu dianjurkan)

Lisensi penuh Bootstrap terletak dalam proyek repositori untuk informasi lebih lanjut.

Menyesuaikan Bootstrap

Bootstrap terbaik dipertahankan ketika Anda memperlakukannya sebagai terpisah dan independen berversi ketergantungan dalam lingkungan pengembangan. Melakukan hal ini membuat upgrade Bootstrap lebih mudah di masa depan.

Setelah Anda download dan termasuk gaya dan skrip Bootstrap's, Anda dapat menyesuaikan komponennya. Hanya membuat stylesheet baru (kurang, jika Anda suka, atau sekadar CSS) untuk penyesuaian.

Kompilasi atau minified?

Kecuali Anda berencana membaca CSS, pergi dengan minified stylesheet. Ini adalah kode yang sama, hanya dipadatkan. Minified gaya menggunakan lebih sedikit bandwidth, yang baik, terutama dalam lingkungan produksi.

Dari sana, termasuk Bootstrap komponen apa pun dan konten HTML Anda perlu membuat template untuk halaman situs Anda.

Menyesuaikan komponen

Anda dapat menyesuaikan komponen untuk berbagai derajat, tapi paling jatuh ke dalam dua kamp: kustomisasi cahaya dan overhauls. Banyak contoh keduanya tersedia dari pihak ketiga.

Kita mendefinisikan kustomisasi cahaya sebagai perubahan dangkal, misalnya, warna dan font perubahan ke yang ada komponen Bootstrap. Sebuah contoh ringan kustomisasi Twitter terjemahan Pusat (coded by @mdo). Mari kita lihat bagaimana menerapkan tombol kustom kami menulis untuk situs ini, .btn-ttc.

Tombol Bootstrap saham membutuhkan hanya satu kelas, .btn, untuk memulai. Di sini kita memperluas .btn gaya dengan kelas pengubah baru, .btn-ttc, bahwa kita akan menciptakan. Ini memberikan tampilan kustom yang berbeda dengan sedikit usaha.

Tombol kustom kami akan kode seperti ini:

<button type="button" class="btn btn-ttc">Simpan perubahan</button>

Note how .btn-ttc ditambahkan ke standar .btn class.

Untuk menerapkan ini, dalam stylesheet kustom, menambahkan CSS berikut:

/* Custom button
-------------------------------------------------- */

/* Override base .btn styles */
/* Apply text and background changes to three key states: default, hover, and active (click). */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}

/* Apply the custom-colored gradients */
/* Note: you'll need to include all the appropriate gradients for various browsers and standards. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}

/* Set the hover state */
/* An easy hover state is just to move the gradient up a small amount. Add other embellishments as you see fit. */
.btn-ttc:hover {
  background-position: 0 -15px;
}

Singkatnya: melihat ke gaya sumber dan duplikat penyeleksi yang Anda butuhkan untuk modifikasi Anda.

Dalam ringkasan, berikut adalah alur kerja dasar:

  • Untuk setiap elemen yang Anda ingin menyesuaikan, menemukan kode CSS Bootstrap dikompilasi.
  • Copy komponen yang pemilih dan gaya dan sisipkan mereka di stylesheet kostum Anda. Misalnya, untuk menyesuaikan latar belakang navbar, hanya menyalin .navbar Spesifikasi gaya.
  • Dalam stylesheet kostum Anda, edit CSS Anda hanya disalin dari sumber Bootstrap. Tidak perlu untuk mengawali kelas tambahan, atau menambahkan !important Sini. Tetap sederhana.
  • Bilas dan ulangi sampai Anda senang dengan kustomisasi Anda.

Setelah Anda merasa nyaman melakukan penyesuaian ringan, visual usaha hanya langsung. Situs seperti Karma, yang menggunakan Bootstrap sebagai CSS reset dengan berat modifikasi, kerja yang lebih luas yang terlibat. Tetapi prinsip yang sama berlaku: termasuk Bootstrap di default stylesheet pertama, kemudian menerapkan stylesheet kostum Anda.

Metode alternatif kustomisasi

Sementara tidak dianjurkan bagi orang-orang baru untuk Bootstrap, Anda dapat menggunakan salah satu dari dua metode alternatif untuk kustomisasi. Yang pertama adalah memodifikasi sumber .less files (making upgrades super difficult), and the second is mapping source LESS code to your own classes via mixins. For the time being, neither of those options are documented here.

Menghilangkan potensi mengasapi

Tidak semua situs dan aplikasi perlu membuat penggunaan semua Bootstrap yang ditawarkan, terutama dalam lingkungan produksi yang mana mengoptimalkan bandwidth adalah masalah. Kami mendorong Anda untuk menghapus apa pun tidak terpakai dengan kami Customizer.

Menggunakan Customizer, cukup centang komponen, fitur, atau aset Anda tidak perlu. Memukul download dan menukar default Bootstrap file dengan yang baru disesuaikan ini. Anda akan mendapatkan vanili Bootstrap, tetapi tanpa fitur * Anda * anggap perlu. Semua membangun kustom termasuk versi terkompilasi dan minified, jadi gunakan mana yang bekerja untuk Anda.