Muat turun

Bootstrap (kini v3.4.1) mempunyai beberapa cara mudah untuk bermula dengan cepat, setiap satu menarik kepada tahap kemahiran dan kes penggunaan yang berbeza. Baca sehingga melihat apa yang sesuai dengan keperluan khusus anda.

jsDelivr

Orang-orang di jsDelivr memberikan sokongan CDN untuk CSS dan JavaScript Bootstrap. Hanya gunakan pautan jsDelivr ini .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Pasang dengan Bower

Anda juga boleh memasang dan mengurus Bootstrap's Less, CSS, JavaScript dan fon menggunakan Bower :

bower install bootstrap

Pasang dengan npm

Anda juga boleh memasang Bootstrap menggunakan npm :

npm install bootstrap@3

require('bootstrap')akan memuatkan semua pemalam jQuery Bootstrap ke objek jQuery. Modul bootstrapitu sendiri tidak mengeksport apa-apa. Anda boleh memuatkan pemalam jQuery Bootstrap secara manual secara individu dengan memuatkan /js/*.jsfail di bawah direktori peringkat atas pakej.

Bootstrap package.jsonmengandungi beberapa metadata tambahan di bawah kekunci berikut:

• less- laluan ke fail Kurang sumber utama Bootstrap
• style- laluan ke CSS tidak dikecilkan Bootstrap yang telah dikompilasi menggunakan tetapan lalai (tiada penyesuaian)

Pasang dengan Komposer

Anda juga boleh memasang dan mengurus Bootstrap's Less, CSS, JavaScript dan fon menggunakan Composer :

composer require twbs/bootstrap

Autoprefixer diperlukan untuk Less/Sass

Bootstrap menggunakan Autoprefixer untuk menangani awalan vendor CSS . Jika anda menyusun Bootstrap daripada sumber Less/Sass dan tidak menggunakan Gruntfile kami, anda perlu menyepadukan Autoprefixer ke dalam proses binaan anda sendiri. Jika anda menggunakan Bootstrap yang telah dikompilasi atau menggunakan Gruntfile kami, anda tidak perlu risau tentang perkara ini kerana Autoprefixer sudah disepadukan ke dalam Gruntfile kami.

Apa yang disertakan

Bootstrap boleh dimuat turun dalam dua bentuk, di mana anda akan menemui direktori dan fail berikut, secara logik mengumpulkan sumber biasa dan menyediakan kedua-dua variasi yang disusun dan dikecilkan.

Bootstrap yang telah disusun sebelumnya

Setelah dimuat turun, nyahzip folder termampat untuk melihat struktur Bootstrap (yang disusun). Anda akan melihat sesuatu seperti ini:

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

Ini adalah bentuk Bootstrap yang paling asas: fail yang telah disusun terlebih dahulu untuk penggunaan drop-in pantas dalam hampir mana-mana projek web. Kami menyediakan CSS dan JS yang disusun ( bootstrap.*), serta CSS dan JS yang disusun dan diperkecil ( bootstrap.min.*). Peta sumber CSS ( bootstrap.*.map) tersedia untuk digunakan dengan alat pembangun penyemak imbas tertentu. Fon daripada Glyphicons disertakan, begitu juga dengan tema Bootstrap pilihan.

Kod sumber Bootstrap

Muat turun kod sumber Bootstrap termasuk aset CSS, JavaScript dan fon yang telah dikompilasi, bersama-sama dengan sumber Kurang, JavaScript dan dokumentasi. Secara lebih khusus, ia termasuk yang berikut dan banyak lagi:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

, less/, js/dan fonts/ialah kod sumber untuk fon CSS, JS dan ikon kami (masing-masing). Folder termasuk semua yang dist/disenaraikan dalam bahagian muat turun yang telah disusun di atas. docs/Folder termasuk kod sumber untuk dokumentasi kami dan penggunaan examples/Bootstrap. Selain itu, mana-mana fail lain yang disertakan menyediakan sokongan untuk pakej, maklumat lesen dan pembangunan.

Menyusun CSS dan JavaScript

Bootstrap menggunakan Grunt untuk sistem binaannya, dengan kaedah yang mudah untuk bekerja dengan rangka kerja. Ini adalah cara kami menyusun kod kami, menjalankan ujian dan banyak lagi.

Memasang Grunt

Untuk memasang Grunt, anda mesti memuat turun dan memasang node.js (yang termasuk npm) dahulu . npm bermaksud modul berpakej nod dan merupakan satu cara untuk mengurus kebergantungan pembangunan melalui node.js.

1. Pasang grunt-clisecara global dengan npm install -g grunt-cli.
2. Navigasi ke direktori akar /bootstrap/, kemudian jalankan npm install. npm akan melihat package.jsonfail dan secara automatik memasang kebergantungan tempatan yang diperlukan yang disenaraikan di sana.

Apabila selesai, anda akan dapat menjalankan pelbagai arahan Grunt yang disediakan daripada baris arahan.

Perintah Grunt yang tersedia

grunt dist(Hanya susun CSS dan JavaScript)

Menjana semula /dist/direktori dengan fail CSS dan JavaScript yang disusun dan diperkecil. Sebagai pengguna Bootstrap, ini biasanya arahan yang anda mahukan.

grunt watch(Tonton)

Menonton fail sumber Kurang dan menyusun semula secara automatik ke CSS apabila anda menyimpan perubahan.

grunt test(Jalankan ujian)

Menjalankan JSHint dan menjalankan ujian QUnit dalam pelayar sebenar terima kasih kepada Karma .

grunt docs(Bina & uji aset dokumen)

Membina dan menguji CSS, JavaScript dan aset lain yang digunakan semasa menjalankan dokumentasi secara setempat melalui bundle exec jekyll serve.

grunt(Bina sepenuhnya semuanya dan jalankan ujian)

Menyusun dan meminimumkan CSS dan JavaScript, membina tapak web dokumentasi, menjalankan pengesah HTML5 terhadap dokumen, menjana semula aset Penyesuai dan banyak lagi. Memerlukan Jekyll . Biasanya hanya perlu jika anda menggodam Bootstrap itu sendiri.

Penyelesaian masalah

Sekiranya anda menghadapi masalah dengan memasang kebergantungan atau menjalankan arahan Grunt, padamkan /node_modules/direktori yang dihasilkan oleh npm terlebih dahulu. Kemudian, jalankan semula npm install.

templat asas

Mulakan dengan templat HTML asas ini atau ubah suai contoh ini . Kami berharap anda akan menyesuaikan templat dan contoh kami, menyesuaikannya mengikut keperluan anda.

Salin HTML di bawah untuk mula bekerja dengan dokumen Bootstrap yang minimum.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for 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://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/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-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Contoh

Bina pada templat asas di atas dengan banyak komponen Bootstrap. Kami menggalakkan anda untuk menyesuaikan dan menyesuaikan Bootstrap agar sesuai dengan keperluan projek individu anda.

Dapatkan kod sumber untuk setiap contoh di bawah dengan memuat turun repositori Bootstrap . Contoh boleh didapati dalam docs/examples/direktori.

Menggunakan rangka kerja

Templat permulaan

Tiada apa-apa selain asas: CSS dan JavaScript yang disusun bersama bekas.

Tema Bootstrap

Muatkan tema Bootstrap pilihan untuk pengalaman yang dipertingkatkan secara visual.

Grid

Berbilang contoh reka letak grid dengan keempat-empat peringkat, sarang dan banyak lagi.

Jumbotron

Bina di sekeliling jumbotron dengan bar navigasi dan beberapa lajur grid asas.

Jumbotron sempit

Bina halaman yang lebih tersuai dengan mengecilkan bekas lalai dan jumbotron.

Navbar dalam tindakan

Navbar

Templat super asas yang merangkumi bar navigasi bersama beberapa kandungan tambahan.

Navbar atas statik

Templat super asas dengan navbar atas statik bersama beberapa kandungan tambahan.

Navbar tetap

Templat super asas dengan navbar atas tetap bersama beberapa kandungan tambahan.

Komponen tersuai

Penutup

Templat satu halaman untuk membina halaman utama yang ringkas dan cantik.

karusel

Sesuaikan bar navigasi dan karusel, kemudian tambahkan beberapa komponen baharu.

Blog

Reka letak blog dua lajur ringkas dengan navigasi tersuai, pengepala dan jenis.

Papan pemuka

Struktur asas untuk papan pemuka pentadbir dengan bar sisi dan bar navigasi tetap.

Halaman log masuk

Reka bentuk dan reka bentuk borang tersuai untuk borang log masuk yang mudah.

Nav yang wajar

Buat navbar tersuai dengan pautan yang dibenarkan. Angkat kepala! Tidak terlalu mesra Safari.

Pengaki melekit

Lampirkan pengaki ke bahagian bawah port pandangan apabila kandungan lebih pendek daripadanya.

Pengaki melekit dengan bar navigasi

Lampirkan pengaki ke bahagian bawah port pandangan dengan bar navigasi tetap di bahagian atas.

Eksperimen

Bootstrap tidak responsif

Lumpuhkan responsif Bootstrap dengan mudah mengikut dokumen kami .

Luar kanvas

Bina menu navigasi luar kanvas boleh togol untuk digunakan dengan Bootstrap.

Alatan

Bootlint

Bootlint ialah alat linter HTML Bootstrap rasmi. Ia secara automatik menyemak beberapa kesilapan HTML biasa dalam halaman web yang menggunakan Bootstrap dengan cara yang agak "vanila". Komponen/widget Vanilla Bootstrap memerlukan bahagian DOMnya untuk mematuhi struktur tertentu. Bootlint menyemak bahawa contoh komponen Bootstrap mempunyai HTML berstruktur dengan betul. Pertimbangkan untuk menambahkan Bootlint pada rantai alat pembangunan web Bootstrap anda supaya tiada kesilapan biasa yang memperlahankan pembangunan projek anda.

Komuniti

Ikuti perkembangan Bootstrap dan hubungi komuniti dengan sumber yang berguna ini.

• Baca dan langgan Blog Rasmi Bootstrap .
• Berbual dengan rakan Bootstrapper menggunakan IRC dalam irc.freenode.netpelayan, dalam saluran ##bootstrap .
• Untuk mendapatkan bantuan menggunakan Bootstrap, tanya pada StackOverflow menggunakan tegtwitter-bootstrap-3 .
• Pembangun harus menggunakan kata kunci bootstrappada pakej yang mengubah suai atau menambah kefungsian Bootstrap apabila mengedarkan melalui npm atau mekanisme penghantaran yang serupa untuk kebolehtemuan maksimum.
• Cari contoh inspirasi orang yang membina dengan Bootstrap di Ekspo Bootstrap .

Anda juga boleh mengikuti @getbootstrap di Twitter untuk gosip terkini dan video muzik yang hebat.

Melumpuhkan tindak balas

Bootstrap menyesuaikan halaman anda secara automatik untuk pelbagai saiz skrin. Berikut ialah cara untuk melumpuhkan ciri ini supaya halaman anda berfungsi seperti contoh tidak responsif ini .

Langkah-langkah untuk melumpuhkan responsif halaman

1. Abaikan viewport yang <meta>disebut dalam dokumen CSS
2. Gantikan widthpada .containeruntuk setiap peringkat grid dengan lebar tunggal, contohnya width: 970px !important;Pastikan ini datang selepas CSS Bootstrap lalai. Anda boleh mengelak !importantpertanyaan dengan media atau beberapa pemilih-fu.
3. Jika menggunakan navbar, alih keluar semua navbar yang runtuh dan gelagat berkembang.
4. Untuk susun atur grid, gunakan .col-xs-*kelas sebagai tambahan kepada, atau sebagai ganti, kelas sederhana/besar. Jangan risau, grid peranti yang lebih kecil berskala kepada semua resolusi.

Anda masih memerlukan Respond.js untuk IE8 (memandangkan pertanyaan media kami masih ada dan perlu diproses). Ini melumpuhkan aspek "tapak mudah alih" Bootstrap.

Templat Bootstrap dengan responsif dilumpuhkan

Kami telah menggunakan langkah ini pada contoh. Baca kod sumbernya untuk melihat perubahan khusus yang dilaksanakan.

Lihat contoh tidak responsif

Sokongan penyemak imbas dan peranti

Bootstrap dibina untuk berfungsi dengan baik dalam desktop dan penyemak imbas mudah alih terkini, bermakna penyemak imbas yang lebih lama mungkin memaparkan gaya yang berbeza, walaupun berfungsi sepenuhnya, pemaparan komponen tertentu.

Penyemak imbas yang disokong

Khususnya, kami menyokong versi terkini penyemak imbas dan platform berikut.

Penyemak imbas alternatif yang menggunakan versi terkini WebKit, Blink atau Gecko, sama ada secara langsung atau melalui API paparan web platform, tidak disokong secara eksplisit. Walau bagaimanapun, Bootstrap harus (dalam kebanyakan kes) memaparkan dan berfungsi dengan betul dalam pelayar ini juga. Maklumat sokongan yang lebih khusus disediakan di bawah.

Peranti mudah alih

Secara umumnya, Bootstrap menyokong versi terkini setiap pelayar lalai platform utama. Harap maklum bahawa penyemak imbas proksi (seperti Opera Mini, mod Turbo Opera Mobile, UC Browser Mini, Amazon Silk) tidak disokong.

Pelayar desktop

Begitu juga, versi terkini kebanyakan penyemak imbas desktop disokong.

Pada Windows, kami menyokong Internet Explorer 8-11 .

Untuk Firefox, sebagai tambahan kepada keluaran stabil biasa yang terkini, kami juga menyokong versi Extended Support Release (ESR) Firefox yang terkini.

Secara tidak rasmi, Bootstrap sepatutnya kelihatan dan berkelakuan cukup baik dalam Chromium dan Chrome untuk Linux, Firefox untuk Linux dan Internet Explorer 7, serta Microsoft Edge, walaupun ia tidak disokong secara rasmi.

Untuk senarai beberapa pepijat penyemak imbas yang perlu dihadapi oleh Bootstrap, lihat Dinding pepijat penyemak imbas kami .

Internet Explorer 8 dan 9

Internet Explorer 8 dan 9 juga disokong, walau bagaimanapun, sila maklum bahawa sesetengah sifat CSS3 dan elemen HTML5 tidak disokong sepenuhnya oleh penyemak imbas ini. Selain itu, Internet Explorer 8 memerlukan penggunaan Respond.js untuk mendayakan sokongan pertanyaan media.

Lawati Bolehkah saya menggunakan... untuk mendapatkan butiran tentang sokongan penyemak imbas ciri CSS3 dan HTML5.

Internet Explorer 8 dan Respond.js

Berhati-hati dengan kaveat berikut apabila menggunakan Respond.js dalam pembangunan dan persekitaran pengeluaran anda untuk Internet Explorer 8.

Respond.js dan CSS merentas domain

Menggunakan Respond.js dengan CSS yang dihoskan pada domain (sub) yang berbeza (contohnya, pada CDN) memerlukan beberapa persediaan tambahan. Lihat dokumen Respond.js untuk mendapatkan butiran.

Respond.js danfile://

Disebabkan oleh peraturan keselamatan penyemak imbas, Respond.js tidak berfungsi dengan halaman yang dilihat melalui file://protokol (seperti semasa membuka fail HTML setempat). Untuk menguji ciri responsif dalam IE8, lihat halaman anda melalui HTTP(S). Lihat dokumen Respond.js untuk mendapatkan butiran.

Respond.js dan@import

Respond.js tidak berfungsi dengan CSS yang dirujuk melalui @import. Khususnya, beberapa konfigurasi Drupal diketahui menggunakan @import. Lihat dokumen Respond.js untuk mendapatkan butiran.

Internet Explorer 8 dan saiz kotak

IE8 tidak menyokong sepenuhnya box-sizing: border-box;apabila digabungkan dengan min-width, max-width, min-height, atau max-height. Atas sebab itu, pada v3.0.1, kami tidak lagi menggunakan max-widthpada .containers.

Internet Explorer 8 dan @font-face

IE8 mempunyai beberapa masalah dengan @font-faceapabila digabungkan dengan :before. Bootstrap menggunakan gabungan itu dengan Glyphiconsnya. Jika halaman dicache, dan dimuatkan tanpa tetikus di atas tetingkap (iaitu tekan butang muat semula atau muatkan sesuatu dalam iframe) maka halaman itu akan dipaparkan sebelum fon dimuatkan. Menuding di atas halaman (badan) akan menunjukkan beberapa ikon dan menuding di atas ikon yang tinggal akan menunjukkannya juga. Lihat isu #13863 untuk butiran.

Mod keserasian IE

Bootstrap tidak disokong dalam mod keserasian Internet Explorer lama. Untuk memastikan anda menggunakan mod pemaparan terkini untuk IE, pertimbangkan untuk memasukkan <meta>teg yang sesuai dalam halaman anda:

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

Sahkan mod dokumen dengan membuka alat penyahpepijatan: tekan F12dan semak "Mod Dokumen".

Teg ini disertakan dalam semua dokumentasi dan contoh Bootstrap untuk memastikan pemaparan terbaik yang mungkin dalam setiap versi Internet Explorer yang disokong.

Lihat soalan StackOverflow ini untuk mendapatkan maklumat lanjut.

Internet Explorer 10 dalam Windows 8 dan Windows Phone 8

Internet Explorer 10 tidak membezakan lebar peranti daripada lebar port pandangan , dan dengan itu tidak menggunakan pertanyaan media dengan betul dalam CSS Bootstrap. Biasanya anda hanya akan menambah coretan pantas CSS untuk membetulkan perkara ini:

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

Walau bagaimanapun, ini tidak berfungsi untuk peranti yang menjalankan Windows Phone 8 versi lebih lama daripada Kemas Kini 3 (aka GDR3) , kerana ia menyebabkan peranti sedemikian menunjukkan kebanyakan paparan desktop dan bukannya paparan "telefon" yang sempit. Untuk menangani perkara ini, anda perlu memasukkan CSS dan JavaScript berikut untuk mengatasi pepijat .

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

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Untuk mendapatkan maklumat lanjut dan garis panduan penggunaan, baca Windows Phone 8 dan Device-Width .

Sebagai makluman, kami memasukkan ini dalam semua dokumentasi dan contoh Bootstrap sebagai demonstrasi.

Pembundaran peratus Safari

Enjin pemaparan versi Safari sebelum v7.1 untuk OS X dan Safari untuk iOS v8.0 mengalami masalah dengan bilangan tempat perpuluhan yang digunakan dalam .col-*-1kelas grid kami. Jadi, jika anda mempunyai 12 lajur grid individu, anda akan dapati bahawa lajur itu menjadi pendek berbanding dengan baris lajur yang lain. Selain menaik taraf Safari/iOS, anda mempunyai beberapa pilihan untuk penyelesaian:

• Tambahkan .pull-rightpada lajur grid terakhir anda untuk mendapatkan penjajaran keras-kanan
• Ubah peratusan anda secara manual untuk mendapatkan pembulatan sempurna untuk Safari (lebih sukar daripada pilihan pertama)

Modal, bar navigasi dan papan kekunci maya

Limpahan dan menatal

Sokongan untuk overflow: hiddenpada <body>elemen agak terhad dalam iOS dan Android. Untuk itu, apabila anda menatal melepasi bahagian atas atau bawah mod dalam salah satu daripada pelayar peranti tersebut, <body>kandungan akan mula menatal. Lihat pepijat Chrome #175502 (dibetulkan dalam Chrome v40) dan pepijat WebKit #153852 .

Medan teks iOS dan menatal

Mulai iOS 9.3, semasa mod dibuka, jika sentuhan awal gerak isyarat tatal berada dalam sempadan teks <input>atau a <textarea>, <body>kandungan di bawah modal akan ditatal dan bukannya modal itu sendiri. Lihat pepijat WebKit #153856 .

Papan kekunci maya

Juga, ambil perhatian bahawa jika anda menggunakan bar navigasi tetap atau menggunakan input dalam mod, iOS mempunyai pepijat pemaparan yang tidak mengemas kini kedudukan elemen tetap apabila papan kekunci maya dicetuskan. Beberapa penyelesaian untuk ini termasuk mengubah elemen anda kepada position: absoluteatau menggunakan pemasa pada fokus untuk cuba membetulkan kedudukan secara manual. Ini tidak dikendalikan oleh Bootstrap, jadi terpulang kepada anda untuk memutuskan penyelesaian yang terbaik untuk aplikasi anda.

Navbar Dropdown

Elemen .dropdown-backdropini tidak digunakan pada iOS dalam navigasi kerana kerumitan pengindeksan-z. Oleh itu, untuk menutup menu lungsur dalam bar navigasi, anda mesti mengklik terus elemen lungsur turun (atau mana-mana elemen lain yang akan melancarkan acara klik dalam iOS ).

Pengezum penyemak imbas

Zum halaman tidak dapat dielakkan mempersembahkan artifak pemaparan dalam beberapa komponen, kedua-duanya dalam Bootstrap dan seluruh web. Bergantung pada isu itu, kami mungkin dapat membetulkannya (cari dahulu dan kemudian buka isu jika perlu). Walau bagaimanapun, kami cenderung untuk mengabaikan perkara ini kerana ia selalunya tidak mempunyai penyelesaian langsung selain daripada penyelesaian yang meretas.

Melekit :hover/ :focuspada mudah alih

Walaupun melayang sebenar tidak boleh dilakukan pada kebanyakan skrin sentuh, kebanyakan penyemak imbas mudah alih mencontohi sokongan melayang dan menjadikan :hover"melekit". Dalam erti kata lain, :hovergaya mula digunakan selepas mengetik elemen dan hanya berhenti menggunakan selepas pengguna mengetik beberapa elemen lain. Ini boleh menyebabkan keadaan Bootstrap :hovermenjadi tidak diingini "terperangkap" pada pelayar tersebut. Sesetengah penyemak imbas mudah alih juga membuat :focusyang serupa melekit. Pada masa ini tiada penyelesaian mudah untuk isu ini selain mengalih keluar gaya sedemikian sepenuhnya.

Mencetak

Malah dalam sesetengah penyemak imbas moden, percetakan boleh menjadi pelik.

Khususnya, pada Chrome v32 dan tanpa mengira tetapan jidar, Chrome menggunakan lebar port pandangan jauh lebih sempit daripada saiz kertas fizikal apabila menyelesaikan pertanyaan media semasa mencetak halaman web. Ini boleh mengakibatkan grid lebih kecil Bootstrap secara tidak dijangka diaktifkan semasa mencetak. Lihat isu #12078 dan pepijat Chrome #273306 untuk beberapa butiran. Penyelesaian yang dicadangkan:

• Terima grid yang lebih kecil dan pastikan halaman anda kelihatan boleh diterima di bawahnya.
• Sesuaikan nilai @screen-*pembolehubah Kurang supaya kertas pencetak anda dianggap lebih besar daripada lebih kecil.
• Tambahkan pertanyaan media tersuai untuk menukar titik putus saiz grid untuk media cetak sahaja.

Selain itu, pada Safari v8.0, s lebar tetap .containerboleh menyebabkan Safari menggunakan saiz fon yang luar biasa kecil semasa mencetak. Lihat #14868 dan pepijat WebKit #138192 untuk butiran lanjut. Satu penyelesaian yang berpotensi untuk ini ialah menambahkan CSS berikut:

@media print {
  .container {
    width: auto;
  }
}

Penyemak imbas saham Android

Di luar kotak, Android 4.1 (dan juga beberapa keluaran yang lebih baharu nampaknya) dihantar dengan apl Penyemak Imbas sebagai penyemak imbas web lalai pilihan (berbanding dengan Chrome). Malangnya, apl Penyemak Imbas mempunyai banyak pepijat dan tidak konsisten dengan CSS secara umum.

Pilih menu

Pada <select>elemen, penyemak imbas saham Android tidak akan memaparkan kawalan sisi jika terdapat border-radiusdan/atau borderdigunakan. (Lihat soalan StackOverflow ini untuk mendapatkan butiran.) Gunakan coretan kod di bawah untuk mengalih keluar CSS yang menyinggung perasaan dan menjadikannya <select>sebagai elemen tidak digayakan pada penyemak imbas saham Android. Ejen pengguna menghidu mengelakkan gangguan dengan penyemak imbas Chrome, Safari dan Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Nak tengok contoh? Lihat demo JS Bin ini.

Pengesah

Untuk memberikan pengalaman terbaik kepada penyemak imbas lama dan buggy, Bootstrap menggunakan penggodam penyemak imbas CSS di beberapa tempat untuk menyasarkan CSS khas kepada versi penyemak imbas tertentu untuk mengatasi pepijat dalam penyemak imbas itu sendiri. Penggodaman ini boleh difahami menyebabkan pengesah CSS mengadu bahawa ia tidak sah. Di beberapa tempat, kami juga menggunakan ciri CSS bleeding-edge yang belum diseragamkan sepenuhnya, tetapi ini digunakan semata-mata untuk peningkatan progresif.

Amaran pengesahan ini tidak penting dalam amalan kerana bahagian CSS kami yang tidak digodam mengesahkan sepenuhnya dan bahagian yang digodam tidak mengganggu fungsi bahagian yang tidak digodam dengan betul, oleh itu sebab kami sengaja mengabaikan amaran ini.

Dokumen HTML kami juga mempunyai beberapa amaran pengesahan HTML yang remeh dan tidak penting kerana kami memasukkan penyelesaian untuk pepijat Firefox tertentu .

Sokongan pihak ketiga

Walaupun kami tidak menyokong mana-mana pemalam atau alat tambah pihak ketiga secara rasmi, kami menawarkan beberapa nasihat berguna untuk membantu mengelakkan kemungkinan isu dalam projek anda.

Bersaiz kotak

Sesetengah perisian pihak ketiga, termasuk Peta Google dan Enjin Carian Tersuai Google, bercanggah dengan Bootstrap disebabkan oleh * { box-sizing: border-box; }, peraturan yang menjadikannya paddingtidak menjejaskan lebar pengiraan akhir elemen. Ketahui lebih lanjut tentang model kotak dan saiz di CSS Tricks .

Bergantung pada konteks, anda boleh mengatasi seperti yang diperlukan (Pilihan 1) atau menetapkan semula saiz kotak untuk seluruh kawasan (Pilihan 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();
}

Kebolehcapaian

Bootstrap mengikut piawaian web biasa dan—dengan usaha tambahan yang minimum—boleh digunakan untuk membuat tapak yang boleh diakses oleh mereka yang menggunakan AT .

Langkau navigasi

Jika navigasi anda mengandungi banyak pautan dan datang sebelum kandungan utama dalam DOM, tambahkan Skip to main contentpautan sebelum navigasi (untuk penjelasan ringkas, lihat artikel Projek A11Y ini mengenai pautan navigasi langkau ). Menggunakan .sr-onlykelas akan menyembunyikan pautan langkau secara visual dan .sr-only-focusablekelas akan memastikan bahawa pautan itu kelihatan apabila difokuskan (untuk pengguna papan kekunci yang kelihatan).

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

Tajuk bersarang

Apabila meletakkan tajuk ( <h1>- <h6>), pengepala dokumen utama anda hendaklah <h1>. Tajuk berikutnya harus menggunakan logik <h2>-<h6> supaya pembaca skrin boleh membina jadual kandungan untuk halaman anda.

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

Kontras warna

Pada masa ini, beberapa kombinasi warna lalai tersedia dalam Bootstrap (seperti pelbagai kelas butang gaya , beberapa warna penyerlahan kod yang digunakan untuk blok kod asas , kelas pembantu .bg-primary latar belakang kontekstual dan warna pautan lalai apabila digunakan pada latar belakang putih) mempunyai nisbah kontras yang rendah (di bawah nisbah yang disyorkan 4.5:1 ). Ini boleh menyebabkan masalah kepada pengguna yang kurang penglihatan atau yang buta warna. Warna lalai ini mungkin perlu diubah suai untuk meningkatkan kontras dan kebolehbacaannya.

Sumber tambahan

• Penanda buku "HTML Codesniffer" untuk mengenal pasti isu kebolehaksesan
• Sambungan Alat Pembangun Kebolehcapaian Chrome
• Penganalisis Kontras Warna
• Projek A11Y
• Dokumentasi kebolehcapaian MDN

Soalan Lazim Lesen

Bootstrap dikeluarkan di bawah lesen MIT dan hak cipta 2019 Twitter. Direbus kepada ketulan yang lebih kecil, ia boleh diterangkan dengan syarat berikut.

Ia memerlukan anda untuk:

• Simpan notis lesen dan hak cipta yang disertakan dalam fail CSS dan JavaScript Bootstrap apabila anda menggunakannya dalam kerja anda

Ia membenarkan anda untuk:

• Muat turun dan gunakan Bootstrap secara percuma, secara keseluruhan atau sebahagian, untuk tujuan peribadi, peribadi, dalaman syarikat atau komersial
• Gunakan Bootstrap dalam pakej atau pengedaran yang anda buat
• Ubah suai kod sumber
• Berikan sublesen untuk mengubah suai dan mengedarkan Bootstrap kepada pihak ketiga yang tidak termasuk dalam lesen

Ia melarang anda untuk:

• Pegang pengarang dan pemilik lesen bertanggungjawab atas kerosakan kerana Bootstrap disediakan tanpa waranti
• Pertanggungjawabkan pencipta atau pemegang hak cipta Bootstrap
• Edarkan semula mana-mana bahagian Bootstrap tanpa atribusi yang betul
• Gunakan sebarang tanda yang dimiliki oleh Twitter dalam apa jua cara yang mungkin menyatakan atau membayangkan bahawa Twitter menyokong pengedaran anda
• Gunakan sebarang tanda yang dimiliki oleh Twitter dalam apa jua cara yang mungkin menyatakan atau membayangkan bahawa anda mencipta perisian Twitter yang berkenaan

Ia tidak memerlukan anda untuk:

• Sertakan sumber Bootstrap itu sendiri, atau apa-apa pengubahsuaian yang mungkin anda buat padanya, dalam mana-mana pengedaran semula yang anda boleh kumpulkan yang merangkuminya
• Serahkan perubahan yang anda buat kepada Bootstrap kembali ke projek Bootstrap (walaupun maklum balas sedemikian adalah digalakkan)

Lesen Bootstrap penuh terletak dalam repositori projek untuk mendapatkan maklumat lanjut.

Terjemahan

Ahli komuniti telah menterjemah dokumentasi Bootstrap ke dalam pelbagai bahasa. Tiada yang disokong secara rasmi dan mereka mungkin tidak sentiasa terkini.

• Bootstrap 中文文档 (Bahasa Cina)
• Bootstrap på Dansk (Denmark)
• Bootstrap en Français (Bahasa Perancis)
• Bootstrap auf Deutsch (Jerman)
• Bootstrap dalam Italiano (Itali)
• Bootstrap 한국어 (Bahasa Korea)
• Bootstrap em Português do Brasil (Portugis Brazil)
• Bootstrap по-русски (Rusia)
• Bootstrap en Español (Bahasa Sepanyol)
• Türkçe Bootstrap (Turki)
• Bootstrap українською (Ukraine)
• Bootstrap bằng tiếng Việt (Vietnam)

Kami tidak membantu mengatur atau menganjurkan terjemahan, kami hanya memautkannya.

Selesai terjemahan baharu atau lebih baik? Buka permintaan tarik untuk menambahkannya pada senarai kami.