Apa itu Bootstrap?

512

Ada banyak pertanyaan di sini terkait dengan Bootstrap. Saya melihat banyak orang menggunakannya. Jadi saya mencoba untuk merisetnya, dan saya menemukan situs Bootstrap resmi , tetapi hanya ada bagian pengunduhan dan beberapa kata setelah itu. Tidak ada yang menjelaskan untuk apa ini ... Saya hanya mengerti bahwa itu adalah pembantu kelas satu. Saya telah mencoba menemukan sesuatu dengan Googling, tetapi tidak menemukan yang spesifik. Semua yang saya temukan terkait dengan definisi ilmu komputer.

Jadi, pertanyaan saya adalah:

  • Apa itu Bootstrap?
  • Untuk apa alat itu digunakan, dan bagaimana itu membantu pengembangan front-end?
  • Saya juga ingin beberapa detail menjelaskannya.
Панайот Толев
sumber
Pertanyaan ini dijawab dengan baik . Harap pikirkan dua kali tentang mengeposkan jawaban baru, terutama jika Anda bermaksud menyalin-tempel jawaban Anda dari tempat lain.
meagar
Dengan segala hormat, @meagar, pertanyaannya tampaknya menanyakan jawaban yang sangat spesifik dan tepat, dan jawaban yang diterima dengan elegan menghindarinya. Yang berarti, secara teknis, itu tidak dijawab dengan baik. Setelah membaca setiap jawaban (termasuk jawaban yang dihapus) saya menambahkan jawaban saya yang, saya harap, menjelaskan apa itu Bootstrap, secara umum dan istilah-istilah yang mudah dipahami, sebagian besar bertujuan untuk mengurangi kebingungan pemula (yang bagaimana saya memahami pertanyaan ini).
tao

Jawaban:

271

Ini adalah kerangka kerja open-source HTML, CSS, dan JavaScript (awalnya dibuat oleh Twitter) yang dapat Anda gunakan sebagai dasar untuk membuat situs web atau aplikasi web.

Memperbarui

Situs web bootstrap resmi diperbarui dan menyertakan definisi yang jelas.

"Bootstrap adalah kerangka HTML, CSS, dan JS yang paling populer untuk mengembangkan proyek pertama yang responsif dan mobile di web."

"Dirancang dan dibangun dengan semua cinta di dunia oleh @mdo dan @fat ."

hutchonoid
sumber
2
@ hutchonoid: apakah selalu bootply gratis? apa perbedaan antara Joomla dan bootply? mana yang lebih baik ?
logan
9
@logan Joomla dan Bootply tidak dapat dibandingkan. Joomla adalah sistem manajemen konten yang dibangun di atas PHP dan SQL, sedangkan Bootply adalah situs web yang digunakan untuk bereksperimen dengan kerangka kerja Bootstrap (sangat berbeda). Pikirkan Bootply sebagai JSFiddle yang khusus untuk Bootstrap. Dan ya, Bootply selalu gratis.
APAD1
15
Saya pikir yang paling relevan untuk menjawab pertanyaan ini adalah dengan mengikuti tautan berlabel "Contoh" yang disediakan dalam jawaban di atas. Menyalin / menempelkan definisi Bootstrap dari situs web mereka jelas tidak berguna mengingat bahwa pengguna yang memposting pertanyaan dengan jelas menyebutkan telah melihat situs web bootstrap. Saya tidak berpikir bahwa melihat teks yang sama dari situs web mereka akan lebih masuk akal hanya karena itu ditulis dalam huruf Bold sekarang.
Mihaela
13
@hutchonoid Mungkin definisi yang jelas untuk Anda karena Anda menggunakan Bootstrap untuk waktu yang lama, tetapi percayalah, definisi di situs web mereka adalah alasan mengapa saya mencari jawaban ini - saya tidak mengerti apa artinya. Jadi saya sepenuhnya setuju dengan Mihaela tentang ini. Jika saya mencari jawaban untuk pertanyaan ini, saya tidak ingin itu menjadi kutipan yang sama dari situs web, hanya dalam font yang lebih besar. Penjelasan Anda tidak masuk akal karena pengguna yang menanyakan ini di masa lalu tidak memerlukan jawaban lagi di masa sekarang dan siapa pun di masa sekarang pasti akan melihat deskripsi dari situs web terlebih dahulu.
Anderson
2
Mungkin beberapa proyek menyebutkan itu paling cocok untuk? (Yaitu. Situs sementara, aplikasi web kecil, situs mikro, dll?)
Chuck Le Butt
94

Bootstrap adalah kerangka kerja Javascript open-source yang dikembangkan oleh tim di Twitter. Ini adalah kombinasi kode HTML, CSS, dan Javascript yang dirancang untuk membantu membangun komponen antarmuka pengguna. Bootstrap juga diprogram untuk mendukung HTML5 dan CSS3.

Juga disebut Front-end-framework.

Bootstrap adalah kumpulan alat bantu gratis untuk membuat situs web dan aplikasi web.

Ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta ekstensi JavaScript opsional.

Beberapa Alasan untuk programmer lebih menyukai Bootstrap Framework

  1. Mudah untuk memulai

  2. Sistem grid yang bagus

  3. Penataan dasar untuk sebagian besar elemen HTML (Tipografi, Kode, Tabel, Formulir, Tombol, Gambar, Ikon)

  4. Daftar komponen yang luas

  5. Plugin Javascript yang dibundel

Diambil dari About Bootstrap Framework

GowriShankar
sumber
16
Ini menurut saya lebih sebagai kumpulan komponen atau widget daripada "kerangka kerja". Bisakah Anda menjelaskan apa yang sebenarnya merupakan "kerangka kerja" dan ketika pustaka komponen berhenti menjadi pustaka komponen dan mulai menjadi "kerangka kerja"? Apakah ada hubungannya dengan "sistem grid?"
Kirby L. Wallace
25

Bootstrap, seperti yang saya tahu, adalah CSS yang didefinisikan dengan baik. Meskipun menggunakan Bootstrap Anda juga bisa menggunakan JavaScript, jQuery dll. Tapi perbedaan utamanya adalah, menggunakan Bootstrap Anda cukup memanggil nama kelas dan kemudian Anda mendapatkan output di formulir HTML. untuk mis. pewarnaan tombol membentuk teks, menggunakan tata letak. Untuk semua ini, Anda tidak perlu menulis file CSS melainkan Anda hanya perlu menggunakan nama kelas yang benar untuk membentuk formulir HTML Anda.

Menggempur
sumber
10
Sebenarnya, bootstrap jauh lebih dari sekadar 'file css'.
Resep
1
Saya setuju dengan @Recipe ini bukan hanya tentang file CSS
Sujay sreedhar
1
Saya pribadi setuju dengan Blitz. Bukan karena ia memiliki daftar lengkap fitur Bootstrap, tetapi di toko saya yang kompleks, saya kebanyakan menggunakan pengkodean purist, dan menggunakan Bootstrap untuk fitur-fitur css yang paling dasar. Itulah inti dari kekuatannya.
Suamere
1
Ini adalah jawaban yang sangat buruk yang menjelaskan dengan buruk apa yang dilakukan oleh CSS (dan hanya CSS). Diturunkan. Ini pada dasarnya hanya menjelaskan bahwa Anda dapat menggunakan CSS dan kemudian referensi kelas untuk memodifikasi UI Anda. Tidak ada hubungannya dengan bootstrap atas sumber daya paket lainnya.
RichieHH
22

Dengan kata sederhana, Anda dapat memahami Bootstrap sebagai kerangka web front-end yang dibuat oleh Twitter untuk pembuatan aplikasi web yang responsif terhadap perangkat dengan lebih cepat. Bootstrap juga dapat dipahami sebagian besar sebagai kumpulan kelas CSS yang didefinisikan di dalamnya yang hanya dapat digunakan secara langsung. Itu menggunakan CSS, javascript, jQuery dll di latar belakang untuk membuat gaya, efek, dan tindakan untuk elemen Bootstrap.

Anda mungkin tahu bahwa kami menggunakan CSS untuk menata elemen laman web dan membuat kelas serta menetapkan kelas pada elemen laman web untuk menerapkan gaya padanya. Bootstrap di sini membuat perancangan lebih mudah karena kita hanya perlu memasukkan file Bootstrap dan menyebutkan nama kelas yang telah ditentukan Bootstrap untuk elemen halaman web kita dan mereka akan ditata secara otomatis melalui Bootstrap. Melalui ini, kita menyingkirkan penulisan kelas CSS kita sendiri untuk menata elemen halaman web. Yang terpenting, Bootstrap dirancang sedemikian rupa sehingga membuat perangkat situs web Anda responsif dan itulah tujuan utamanya. Alternatif lain untuk Bootstrap bisa berupa - Foundation , Materialize etc. frameworks.

Bootstrap membuat Anda bebas dari menulis banyak kode CSS dan juga menghemat waktu yang Anda habiskan untuk mendesain halaman web.

gauravparmar
sumber
18

Bootstrap adalah CSS sumber terbuka, kerangka kerja JavaScript yang awalnya dikembangkan untuk aplikasi twitter oleh tim desainer dan pengembang twitter. Kemudian mereka merilisnya untuk open-source. Menjadi pengguna lama bootstrap twitter, saya menemukan bahwa ini adalah salah satu yang terbaik untuk mendesain situs web yang siap seluler. Banyak plugin CSS dan Javascript tersedia untuk mendesain situs web Anda dalam waktu singkat. Ini semacam kerangka desain template cepat. Beberapa orang mengeluh bahwa file CSS bootstrap berat dan membutuhkan waktu untuk memuat tetapi klaim ini dibuat oleh orang yang malas. Anda tidak harus menyimpan bootstrap.css lengkap di situs web Anda. Anda selalu memiliki opsi untuk menghapus gaya untuk komponen yang tidak Anda perlukan untuk situs web Anda. Sebagai contoh, jika Anda hanya menggunakan komponen dasar seperti formulir dan tombol maka Anda dapat menghapus komponen lain seperti akordeon dll dari file CSS utama. Untuk mulai mencoba-coba bootstrap, Anda dapat mengunduh templat dasar dan komponen darisitus getbootstrap dan biarkan keajaiban terjadi.

lebih berharga
sumber
4

Penafian: Saya telah menggunakan bootstrap di masa lalu, tetapi saya tidak pernah benar-benar menghargai apa yang sebenarnya, deskripsi ini berasal dari saya yang datang ke definisi saya sendiri, hari ini. Dan saya tahu bahwa bootstrap v4 sudah keluar, tetapi saya menemukan dokumentasi bootstrap v3 menjadi lebih jelas, jadi saya menggunakannya. Perpustakaan tidak akan mengubah secara mendasar apa yang disediakannya.

Secara singkat

Bootstrap adalah kumpulan file CSS dan javascript yang menyediakan beberapa style default yang tampak bagus untuk elemen html standar, dan beberapa objek konten web umum yang bukan elemen html standar.

Untuk membuat analogi, itu seperti menerapkan tema di powerpoint, tetapi untuk situs web Anda: itu membuat segalanya terlihat cukup bagus tanpa terlalu banyak upaya awal.

Terdiri dari apa itu?

Dokumentasi v3 resmi memecahnya menjadi tiga bagian:

Ini kira-kira sesuai dengan tiga hal utama yang disediakan Bootstrap:

  • File CSS biasa yang menata elemen html standar. Jadi, Bootstrap membuat elemen standar Anda terlihat cantik. misalnya html:<input class="btn btn-default" type="button" value="Input">Click me</button>
  • File CSS yang menggunakan gaya pada elemen html standar untuk membuatnya menjadi sesuatu yang bukan elemen html standar tetapi merupakan elemen Bootstrap standar (mis. Https://getbootstrap.com/docs/3.3/components/#progress ). Dengan cara ini Bootstrap memperluas daftar elemen web "standar" dengan cara yang konsisten secara visual. misalnya html:<span class="glyphicon glyphicon-align-left"></span>
  • Kelas-kelas CSS dirancang dengan mempertimbangkan jQuery. Secara internal, Bootstrap menggunakan penyeleksi jQuery untuk memodifikasi gaya on the fly dan berinteraksi dengan DOM, dan dengan demikian memberikan pengguna kemampuan yang sama. Saya percaya ini membutuhkan lebih banyak penjelasan, jadi ...

Menggunakan Javascript / jQuery

Bootstrap meluas jQuery sedikit. Jika kita melihat kode sumber, kita dapat melihat bahwa itu menggunakan jQuery untuk melakukan hal-hal seperti: mengatur pendengar untuk acara keydown untuk berinteraksi dengan dropdown . Itu melakukan semua pengaturan jQuery ini ketika Anda mengimpornya di <script>tag Anda , jadi Anda perlu memastikan jQuery dimuat sebelum Bootstrap.

Selain itu, ini mengikat javascript ke DOM lebih erat daripada jQuery biasa, menyediakan antarmuka kelas javascript . misalnya beralih tombol secara terprogram . Ingat bahwa CSS hanya mendefinisikan bagaimana suatu benda terlihat, sehingga pekerjaan utama dari operasi ini cenderung untuk memodifikasi kelas CSS mana yang berlaku untuk elemen pada saat itu. Perubahan semacam ini, berdasarkan input pengguna, tidak dapat dilakukan dengan CSS biasa.

Ada interaksi standar lainnya dengan pengguna yang kami gunakan di internet yang tidak tercakup oleh CSS. Seperti, mengklik tautan yang menggulung Anda ke bawah sebuah halaman alih-alih mengubah halaman. Salah satu hal yang diberikan Bootstrap kepada Anda adalah cara mudah untuk menerapkan perilaku ini di situs web Anda sendiri.

Standar

Saya telah menyebutkan kata "standar" banyak di sini, dan untuk alasan yang bagus. Saya pikir hal terbaik yang disediakan oleh Bootstrap adalah serangkaian standar yang terlihat bagus. Anda bebas untuk memodifikasi tema default sebanyak yang Anda inginkan, tetapi ini adalah baseline yang lebih baik daripada html mentah, css dan js. Dan inilah mengapa ini disebut "framework".

Browser web yang berbeda memiliki gaya default yang berbeda dan dapat bertindak secara berbeda, dan memerlukan awalan CSS yang berbeda dan hal-hal seperti itu. Manfaat utama Bootstrap adalah jauh lebih dapat diandalkan daripada menulis sendiri semua hal lintas-peramban (Anda masih akan mengalami masalah, saya yakin, tetapi lebih mudah).

Saya pikir Bootstrap lebih disukai ketika tegukan dan babel tidak sepopuler itu. Melihat Bootstrap sepertinya berasal dari waktu sebelum semua orang menyusun javascript mereka. Itu masih relevan, tetapi Anda bisa mendapatkan beberapa manfaat dari sumber lain sekarang.

Versi CSS yang lebih baru memungkinkan Anda untuk mendefinisikan transisi antara daftar statis ini saat mereka berubah. Versi asli Bootstrap sebenarnya sudah ada sebelum adopsi kemampuan ini di browser, sehingga mereka masih memiliki kelas animasi sendiri. Ada beberapa bit Bootstrap yang seperti ini: bahwa hal-hal lain telah muncul di sekitarnya dan membuatnya tampak sedikit berlebihan.

Multihunter
sumber
3

Bootstrap adalah kerangka kerja HTML, CSS, JS dengan banyak komponen yang memungkinkan Anda membuat situs web yang indah dan modern atau aplikasi web dengan sangat cepat.

Situs web berikut berisi contoh, elemen, dan komponen yang dapat digunakan kembali yang dapat Anda integrasikan ke dalam proyek Anda menggunakan kerangka kerja bootstrap

bootsnipp.com

startbootstrap.com

bootdey.com

Dey-Dey
sumber
1

Bootstrap adalah kerangka kerja open-source yang paling populer dan banyak digunakan di dunia untuk dikembangkan dengan HTML, CSS, dan JS. Ini adalah kerangka ujung depan HTML. Bootstrap membantu membangun situs web atau aplikasi web yang responsif dan sistem grid 12 kolom yang membantu menyesuaikan situs web secara dinamis dengan resolusi layar yang sesuai. Versi bootstrap saat ini adalah 4.3.1 dan tim bootstrap juga telah secara resmi mengumumkan versi Bootstrap 5 dan perubahan seperti menghapus jquery dari bootstrap. Beberapa alasan penting mengapa kerangka bootstrap lebih disukai adalah

  • Mudah digunakan
  • Bootstrap memiliki dukungan komunitas besar
  • Kustomisasi dapat dilakukan dengan mudah
  • Ini meningkatkan kecepatan pengembangan
  • Responsif

    Untuk detail lebih lanjut, Anda dapat memeriksa situs web resmi: https://getbootstrap.com/

Sumber: https://vmokshagroup.com/blog/bootstrap-ugianages/

Saanvi Sen
sumber
1

Dengan standar dan terminologi web saat ini, saya akan mengatakan Bootstrap sebenarnya bukan kerangka kerja , meskipun itulah yang diklaim situs web mereka. Sebagian besar pengembang mempertimbangkan kerangka Angular, Vue, dan React, sementara Bootstrap umumnya disebut sebagai " perpustakaan ".

Tetapi, agar lebih tepat dan benar, Bootstrap adalah sumber terbuka, kumpulan pertama dari utilitas desain CSS, JavaScript, dan HTML yang bertujuan menyediakan sarana untuk mengembangkan elemen web yang umum digunakan dengan jauh lebih cepat (dan lebih pintar) daripada harus membuat kode dari awal. .

Beberapa prinsip inti yang berkontribusi pada kesuksesan Bootstrap:

  • itu dapat digunakan kembali
  • fleksibel (yaitu: memungkinkan sistem grid kustom, mengubah breakpoint responsif, ukuran selokan kolom atau warna negara dengan mudah; sebagai aturan praktis, sebagian besar pengaturan dikendalikan oleh variabel global)
  • itu intuitif
  • itu modular (baik JavaScript dan (S) CSS menggunakan pendekatan modular; orang dapat dengan mudah menemukan tutorial tentang membuat build Bootstrap kustom, untuk memasukkan hanya bagian-bagian yang mereka butuhkan)
  • memiliki kompatibilitas lintas-browser di atas rata-rata
  • aksesibilitas web di luar kotak (siap pembaca layar)
  • ini didokumentasikan dengan cukup baik

Ini berisi templat desain dan fungsionalitas untuk: tata letak, tipografi, formulir, navigasi, menu (termasuk dropdown), tombol, panel, lencana, modals, peringatan, tab, dilipat, akordion, komidi putar, daftar, tabel, pagination, utilitas media (termasuk sematan, gambar dan penggantian gambar), utilitas responsif, utilitas berbasis warna (primer, sekunder, bahaya, peringatan, info, cahaya, gelap, bisu, putih), utilitas lain (posisi, margin, bantalan, ukuran, jarak, penyelarasan, visibilitas), scrollspy, imbuhan, tooltips, popovers.


Secara default ini bergantung pada jQuery, tetapi Anda akan menemukan varian gratis jQuery yang didukung oleh masing-masing kerangka JavaScript progresif populer modern:

Bekerja dengan Bootstrap sangat bergantung pada penerapan kelas-kelas tertentu (atau, tergantung pada kerangka JS: arahan, metode atau atribut / alat peraga) dan pada penggunaan struktur markup tertentu.

Dokumentasi biasanya berisi contoh-contoh umum yang dapat dengan mudah disalin dan digunakan sebagai template pemula.


Keuntungan lain dari pengembangan dengan Bootstrap adalah komunitasnya yang dinamis, diterjemahkan ke dalam banyak tema, templat dan plugin yang tersedia untuknya, sebagian besar di antaranya adalah open-source (yaitu: kalender, pemilih tanggal / waktu, plugin untuk manajemen konten tabular, seperti juga koleksi perpustakaan / komponen yang dibangun di atas Bootstrap, seperti MDB, templat portofolio, templat admin, dll ...)

Terakhir, namun tidak kalah pentingnya, Bootstrap telah dipelihara dengan baik selama bertahun-tahun, yang menjadikannya pilihan yang kuat untuk aplikasi / situs web yang siap produksi.

tao
sumber