Source

pengenalan

Mulakan dengan Bootstrap, rangka kerja paling popular di dunia untuk membina tapak yang responsif, diutamakan mudah alih, dengan jsDelivr dan halaman permulaan templat.

Permulaan pantas

Ingin menambah Bootstrap dengan cepat pada projek anda? Gunakan jsDelivr, disediakan secara percuma oleh orang-orang di jsDelivr. Menggunakan pengurus pakej atau perlu memuat turun fail sumber? Pergi ke halaman muat turun.

CSS

Salin-tampal helaian gaya <link>ke dalam anda <head>sebelum semua helaian gaya lain untuk memuatkan CSS kami.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

Banyak komponen kami memerlukan penggunaan JavaScript untuk berfungsi. Khususnya, mereka memerlukan jQuery , Popper.js dan pemalam JavaScript kami sendiri. Letakkan <script>s berikut berhampiran penghujung halaman anda, betul-betul sebelum teg penutup </body>, untuk membolehkannya. jQuery mesti didahulukan, kemudian Popper.js, dan kemudian pemalam JavaScript kami.

Kami menggunakan jQuery's slim build , tetapi versi penuh juga disokong.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Ingin tahu komponen mana yang secara eksplisit memerlukan jQuery, JS kami dan Popper.js? Klik pautan tunjukkan komponen di bawah. Jika anda sama sekali tidak pasti tentang struktur halaman umum, teruskan membaca untuk contoh templat halaman.

Kami bootstrap.bundle.jsdan bootstrap.bundle.min.jssertakan Popper , tetapi bukan jQuery . Untuk mendapatkan maklumat lanjut tentang perkara yang disertakan dalam Bootstrap, sila lihat bahagian kandungan kami .

Tunjukkan komponen yang memerlukan JavaScript
  • Makluman untuk menolak
  • Butang untuk menogol keadaan dan kotak semak/fungsi radio
  • Karusel untuk semua gelagat, kawalan dan penunjuk slaid
  • Runtuhkan untuk menogol keterlihatan kandungan
  • Jatuh turun untuk memaparkan dan meletakkan kedudukan (juga memerlukan Popper.js )
  • Modal untuk memaparkan, meletakkan kedudukan dan tingkah laku tatal
  • Navbar untuk melanjutkan pemalam Runtuhkan kami untuk melaksanakan tingkah laku responsif
  • Petua alat dan popover untuk memaparkan dan meletakkan kedudukan (juga memerlukan Popper.js )
  • Scrollspy untuk tingkah laku tatal dan kemas kini navigasi

Templat permulaan

Pastikan halaman anda disediakan dengan reka bentuk dan piawaian pembangunan terkini. Ini bermakna menggunakan doctype HTML5 dan menyertakan teg meta viewport untuk tingkah laku responsif yang betul. Letakkan semuanya bersama-sama dan halaman anda sepatutnya kelihatan seperti ini:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Itu sahaja yang anda perlukan untuk keperluan halaman keseluruhan. Lawati dokumen Reka Letak atau contoh rasmi kami untuk mula menyusun kandungan dan komponen tapak anda.

Global yang penting

Bootstrap menggunakan segelintir gaya dan tetapan global penting yang perlu anda ketahui semasa menggunakannya, yang kesemuanya hampir secara eksklusif menjurus ke arah normalisasi gaya penyemak imbas silang. Jom selami.

doctype HTML5

Bootstrap memerlukan penggunaan doctype HTML5. Tanpa itu, anda akan melihat beberapa penggayaan tidak lengkap yang funky, tetapi memasukkannya tidak sepatutnya menyebabkan sebarang gangguan yang ketara.

<!doctype html>
<html lang="en">
  ...
</html>

Tag meta responsif

Bootstrap dibangunkan mudah alih dahulu , strategi di mana kami mengoptimumkan kod untuk peranti mudah alih dahulu dan kemudian meningkatkan komponen seperti yang diperlukan menggunakan pertanyaan media CSS. Untuk memastikan pemaparan yang betul dan zum sentuh untuk semua peranti, tambahkan teg meta port pandangan responsif pada <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Anda boleh melihat contoh ini dalam tindakan dalam templat pemula .

Bersaiz kotak

Untuk saiz yang lebih mudah dalam CSS, kami menukar nilai global box-sizingdaripada content-boxkepada border-box. Ini memastikan paddingtidak menjejaskan lebar pengiraan akhir elemen, tetapi ia boleh menyebabkan masalah dengan beberapa perisian pihak ketiga seperti Peta Google dan Enjin Carian Tersuai Google.

Pada kesempatan yang jarang berlaku anda perlu mengatasinya, gunakan sesuatu seperti berikut:

.selector-for-some-widget {
  box-sizing: content-box;
}

Dengan coretan di atas, elemen bersarang—termasuk kandungan yang dijana melalui ::beforedan ::after—semua akan mewarisi yang ditentukan box-sizinguntuk itu .selector-for-some-widget.

Ketahui lebih lanjut tentang model kotak dan saiz di CSS Tricks .

But semula

Untuk pemaparan silang penyemak imbas yang dipertingkatkan, kami menggunakan But semula untuk membetulkan ketidakkonsistenan merentas penyemak imbas dan peranti sambil menyediakan tetapan semula yang lebih berpandangan kepada elemen HTML biasa.

Komuniti

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

  • Ikuti @getbootstrap di Twitter .
  • Baca dan langgan Blog Rasmi Bootstrap .
  • Berbual dengan rakan Bootstrapper di IRC. Pada irc.freenode.netpelayan, dalam ##bootstrapsaluran.
  • Bantuan pelaksanaan boleh didapati di Stack Overflow (ditandakan bootstrap-4).
  • 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.

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