Hotline : ‎0811 9720 2000 info@codeva.co.id
Select Page

Bootstrap Adalah – Untuk dibagian pertama ini kami akan membahas pengertian mengenai Bootstrap. Untuk umumnya Bootstrap adalah sebuah library framework CSS yang juga sudah dibuat secara khusus guna mengembangkan front end di dalam sebuah website.

Bootstrap ini juga biasa dikenal dengan salah satu framework CSS, HTML, Javascript yang sangat populer yang ada di kalangan para website developer. Fungsi dari Bootstrap adalah pengembangan website agar nantinya akan lebih terlihat sangat responsive.

Apabila adanya Bootstrap tersebut maka tentu kalian bisa langsung membuat suatu halaman website yang dapat disesuaikan dengan semua ukuran monitor perangkat. Entah itu diakses melalui gadget kalian ataupun di desktop yang kalian miliki. Utamanya Bootstrap itu bernama Twitter Blueprint.

Apabila kalian mengetahui Twitter ataupun sudah sering menggunakan twitter yang dibuat tampilannya lebih klasik namun setelah itu juga kalian bisa melihat tampilan dari twitter itu, saat ini sangat menarik dan juga lebih modern, Tampilan tersebut sangat rapi dan nyaman untuk dilihat.

Ini juga tadinya diciptakan oleh Jacob Thornton dan juga Mark Otto yang saat ini mengelola Twitter untuk bisa menciptakan, mengembangkan dan memajukan konsisten Twitter tersebut. Contoh lainnya adalah WordPress, CMS, Joomla dan lain sebagainya yang menggunakan Bootstrap guna framework untuk mengatur web view yang dibuat.

Jangan takut, kalian juga bisa membuat website dengan tampilan profesional seperti contoh website tadi, jadi simak selengkapnya di dalam artikel ini karena kami akan membahas dan mengulas mengenai pengertian Bootstrap hingga cara menggunakan Bootstrap itu sendiri.

Pengertian Bootstrap Adalah Salah Satu Framework CSS

pengertian bootstrap

Bootstrap adalah salah satu framework CSS yang digunakan khusus untuk suatu pengembangan front-end website. Framework tersebut juga mempunyai nama asli yaitu Twitter Blueprint. Nah kalian pasti bingung kenapa di dalam framework tersebut terdapat kata “Twitter”,

Yup! apabila kalian menebak bahwa kata tersebut digunakan karena penggunaan framework tersebut juga digunakan di aplikasi sosial media Twitter yang saat ini jumlah penggunanya sebanyak 326 juta orang di seluruh dunia.

Sebelum adanya Bootstrap ini muncul, selain itu terdapat framework lain yang juga terdapat di website lainnya. Namun, tingkat pengembangan tersebut juga sangatlah buruk, dan juga akan membutuhkan biaya yang sangat mahal.

Maka setelah Bootstrap masuk ke dalam dunia framework maka, semuanya seperti terkendali dan banyak keuntungan yang didapatkan dengan menggunakan Bootstrap ini. Selain itu framework dari Bootstrap ini juga sangat sederhana dan juga konsisten dengan sistem yang mereka miliki.

Baca Juga  7 Bahasa Pemrograman? Kenali Pengertian dan Macam-Macamnya

Bootstrap adalah sebuah framework yang dapat memungkinkan para developer untuk menembangkan sebuah website dengan sangat mudah, dan juga sangat mempersingkat waktu. Para developer tersebut tidak perlu sulit-sulit menjalankan framework tersebut, mereka hanya tinggal memanggil sebuah class tertentu untuk nantinya membuatkan tombol, panel, announcement, dan lain-lain.

Di dalam Bootstrap tersebut terdapat beberapa file. Nah file tersebut berisikan kumpulan-kumpulan baris kode yang sudah tersusun rapi dari CSS, dan dari JavaScript dalam bentuk class. Apabila kalian ingin menggunakan Bootstrap guna mengembangkan suatu website, dan kalian hanya perlu memanggil salah satu class dari kumpulan baris tersebut.

Apakakah Fungsi Bootstrap Untuk Website?

cara menggunakan bootstrap

Selain itu terdapat beberapa fungsi Bootstrap yang juga dapat kalian pakai dalam mengembangkan suatu website. Dibawah ini fungsinya :

a. Dapat mempersingkat waktu yang digunakan guna dalam memproses suatu pembuatan front end yang ada di dalam suatu website.

b. Selain itu bisa menampilkan suatu sisi website yang juga sangat modern dan juga sangat khas untuk para pemuda di jaman saat ini.

c. Dapat menampilkan tampilan yang sangat responsif dan dapat dikatakan suatu hal yang sangat bagus guna nantinya dapat mensupport segala jenis semua resolusi gadget.

d. Bootstrap yang digunakan oleh banyak website biasanya tampilannya lebih ringan dan lebih teratur atau terstruktur.

Keunggulan Bootstrap

keunggulan bootstrap

Bagi kalian yang penasaran apa itu keunggulan ada di Bootstrap, diantaranya adalah :

a. Dapat Mempersingkat Waktu, dengan struktur website yang sangat produktif dari tangan para programmer yang sangat handal, maka nantinya bootstrap akan memiliki banyak mengenai aspek yang sangat memberikan kelebihan di dalam suatu website desain maka nantinya akan mempermudah pekerjaan para programmer.

b. Bersifat Lebih Fleksibel, frame yang ada di dalam Bootstrap ini sangat dapat digunakan sesuai dengan keinginan dan bebas, kalian juga bisa lebih mudah untuk menggunakan berbagai script yang sudah tersedia.

Baca Juga  Pengertian Algoritma, Struktur dan Ciri - Ciri Pemrograman

Dan hal tersebut lah yang akan membuat kalian bisa melakukan apapun mengenai bentuk yang sesuai dengan keinginan kalian dengan memanfaatkan macam-macam tools yang terdapat di Bootstrap.

c. JavaScript, di dalam Bootstrap itu sendiri sudah dapat dilengkapi dengan Library JavaScript yang nantinya akan menyesuaikan dengan bahasa pemrograman yang dimiliki oleh JavaScript standar. Maka, dengan adanya komponen tersebut kalian bisa lebih berkekuatan lebih saat membuat website.

Cara Menginstall Bootstrap 4

cara menggunakan bootstrap

Setelah kalian memahami pengertian dari Bootstrap dan apa fungsi dari Bootstrap itu sendiri maka saat ini kalian akan kami akan menyajikan bagaimana cara menginstall Bootstrap 4, dalam menginstall Bootstrap di dalam proses instalasi tersebut, terdapat beberapa pilihan,

Pilihan itu diantaranya adalah kalian bisa menginstall Bootstrap menggunakan Composer, Bower, ataupun NPM. Dan selain itu Bootstrap juga bisa di install dengan cara online maupun offline. Apabila kalian ingin menginstall Bootstrap dengan cara offline maka nantinya kalian harus menyiapkan project Bootstrap yang tergantung dari dampak lingkungan yang digunakan.

1. Cara Menginstall Bootstrap secara Offline

Di dalam proses unduhan dengan cara offline ini, nantinya akan memudahkan kalian dalam memproses pengembangan website. Website tersebut juga tidak perlu diambil dari dalam file (resource) dari beberapa website lainnya, namun kalian bisa langsung mengambilnya dari dalam penyimpanan utama.

a. Pertama : Buat direktori terbaru

Lalu lanjut untuk mendownload Bootstrap, kalian bisa menambahkan folder yang terbaru dan setelah itu tempelkan folder baru kalian di dalam folder root web server yang kalian miliki. Apabila kalian menggunakan Linux, maka ketik ”$ mkdir website-bs4“, lalu langsung kalian masuk ke proses instalasi Bootstrap dari website resminya, yaitu : https://getbootstrap.com/

Apabila kalian sudah sukses mengunduh Bootstrap maka selanjutnya kalian akan mendapatkan file zip, dengan beberapa folder yang ada di dalamnya. Di dalam folder zip tersebut juga terdapat file-file yang sudah terkumpul di dalam beberapa assets,

terlebih nantinya akan menyediakan fungsi dan class yang ada di dalam file tersebut. Tentunya zip tersebut juga harus kalian ekstrak dulu sebelum digunakan, ke dalam folder project yang nantinya ingin kalian buat.

b. Kedua : Ekstrak File Bootstrap

Apabila kalian sudah selesai memindahkan semua file zip ke dalam folder project yang kalian miliki, selanjutnya kalian harus mengekstrak file tersebut di dalamnya. Kalian akan disuguhkan dengan beberapa susunan direktori.

c. Ketiga : Membuat Suatu File Index.html

Agar nantinya kalian bisa menggunakan Bootstrap dan apabila akan membuat suatu halaman website, maka kalian bisa membuka teks editor dan membuat juga file index.html. Di dalam file tersebut nantinya akan berisikan beberapa baris kode, namun kalian jangan lupa untuk memanggil suatu file Bootstrap dan juga library lainnya.

Di dalam baris kode tersebut nantinya kalian akan banyak memanggil file mengenai bootstrap.min.css yang terdapat di dalam folder css dengan baris :

“<link rel=”stylesheet” href=”css/bootstrap.min.css” />” ,

apabila kalian sudah sampai pada tahap ini, maka kalian dapat mengembangkan website yang dibuat dan juga menggunakan Bootstrap.

2. Cara Menginstall Bootstrap dengan Cara Online

Selain menggunakan cara offline, maka kalian bisa memanggil Bootstrap dengan menggunakan cara online yaitu dengan menggunakan CDN. Apa itu CDN? CDN adalah singkatan dari Content Delivery Network (CDN) yaitu untuk mempermudah dan mempercepat loading website.

Yang dimana fungsi dari CDN itu sendiri merupakan memastikan seluruh pengiriman konten statis yaitu misalnya gambar, CSS, JavaScript, ataupun yang lainnya, dengan menggunakan CDN.

Namun untuk Bootstrap online ini terdapat salah satu hal yang harus diperhatikan yaitu apabila kalian memanggil dengan cara online maka tentunya nanti akan mengurangi tingkat kecepatan dalam website tersebut.

“<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js”></script>”

Perintah tersebut nantinya akan mengambil beberapa file Bootstrap dan juga akan menyalin ke dalam website yang kalian kelola guna dapat digunakan dengan class ataupun fungsi lainnya.

5 Cara Menggunakan Bootstrap

cara menginstal bootstrap

1. Membuat Suatu Tabel Menggunakan Bootstrap

Nah untuk menggunakan suatu Bootstrap kalian bisa memberikan suatu kemudahan guna membuat suatu tabel tanpa nantinya kalian mengetikkan banyak baris mengenai suatu program kode. Kalian hanya diperlukan untuk bisa memanggil class yang terdapat di dalam suatu file Bootstrap.

Agar nantinya kalian bisa menggunakan class dengan campuran lain class, maka kalian bisa menggunakan class table yang akan ditambah dengan class lainnya. Dengan contohnya seperti :

untuk membuat suatu tabel stripped
<table class=”table table-striped”>

atau untuk membuat tabel hovel

<table class=”table table-hover”>

Dan di dalam file yang terdapat Bootstrap nantinya akan tersedia beberapa class dengan desain guna kebutuhan pembuatan suatu tabel, yaitu “.table”, “.table-striped”, “.table-bordered”, ataupun “.table-hover”.

Baca Juga  Cara Belajar PHP Dasar dan 5 Aplikasi Belajar Terpopular

• “.table” : dimanfaatkan untuk membuat dan mengartikan tabel biasa ataupun tabel yang berbentuk standar. Class ini menggunakan baris berupa kode <table class=”table”> secara horizontal.

• “.table-striped”: dimanfaatkan guna membuat suatu tabel dengan menggunakan gaya zebra. Namun warna tersebut nantinya setiap baris akan berselang-seling, dengan menggunakan baris kode <table class=”table table-striped”>.

• “.table bordered”: dimanfaatkan untuk menampilkan border yang ada di dalam table.

• “table-hover”: Untuk memberikan beberapa efek hover yang ada di dalam baris.

Apabila kalian ingin memberikan beberapa warna di dalam tabel tersebut maka, data tersebut bisa kalian gunakan dengan menggunakan Bootstrap, “success”, “.danger”, dan lain sebagainya.

2. Memberi Aturan Gambar dengan Menggunakan Bootstrap.

Selain untuk menentukan garis ataupun warna garis sudah kami jelaskan di atas, nah sekarang kami akan menjelaskan mengenai cara membuat suatu gambar yang berbentuk lingkaran, ataupun thumbnail lainnya.

• “.img-responsive”: yaitu merupakan suatu class yang dapat kalian gambar yang juga dapat dibuka dengan berbagai ukuran gambar.

• “.img-rounded”: untuk membuat gambar yang melengkung yang ada di bagian beberapa sisinya.

• “img.circle” : untuk menggambar bentuk lingkaran atau melingkar.

• “img-thumbnail”: membuat gambar thumbnail dengan menggunakan Bootstrap.

3. Membuat Suatu Pesan Peringatan (Alert) dengan Menggunakan Bootstrap

cara belajar bootstrap

Di dalam Bootstrap tersebut juga akan menampilkan suatu pesan peringatan ataupun suatu alert dengan mudah dan juga cepat. Kalian hanya tinggal memanggil suatu class yang berada di Bootstrap dengan menggunakan hanya satu perintah.

Ada beberapa pilihan class yang digunakan untuk menampilkan suatu alert di dalam Bootstrap, diantaranya adalah :

• “.alert-success” : Untuk memberi tahu mengenai aksi yang sukses maupun positif.

• “.alert-info” : Untuk mengidentifikasi suatu aksi yang bersifat sangat netral.

• “.alert-warning” : Untuk memberitahukan pesan yang bersifat warning dan membutuhkan perbaikan, dan

• “.alert-danger” : Untuk memberitahukan pesan yang sangat penting dan memungkinkan sesuatu kemungkinan yang buruk.

4. Membuat suatu Tombol dengan Bootstrap

Tombol tentu saja akan digunakan di setiap website, kegunaan dari tombol adalah komponen yang paling umum yang nantinya akan menyediakan suatu class guna membuat sebuah tombol yang sangat unik, dan juga menarik. Kalian juga bisa memanggil hanya salah satu class tombol dan tombol tersebut dapat kalian tampilkan di dalam halaman website.

Apabila kalian ingin membuat tombol website, maka kalian hanya memanggil class “btn”, dan kalian juga bisa menambahkan variasi tombol lainnya di dalam website, agar website yang kalian kelola lebih nyaman untuk dibaca. Dibawah ini merupakan class dalam memberikan suatu variasi tombol, yaitu :

• .btn : tombol dengan warna abu kehitaman.

• .btn-default : Berwarna abu-abu

• .btn-primary : Berwarna biru.

• .btn-success : Tombol ketika sukses menginput sesuatu ataupun sedang memproses suatu program

• .btn-info : Berwarna biru muda

• .btn-waring : Berwarna kuning

• .btn-danger : Berwarna merah tua

• .btn-link : Tombol persegi untuk sebuah link.

5. Membuat Sebuah Panel Menggunakan Bootstrap

Untuk penggunaan Bootstrap yang terakhir yaitu membuat suatu panel. Panel adalah sebuah garis yang nantinya akan terbentuk dari suatu garis dan juga padding

Di dalam Bootstrap nantinya kalian akan mempunyai 3 bagian, yang terdiri dari : header, body, dan juga footer. Header ini posisinya ada di bagian atas. Body berada di tengah atau biasa kita kenal dengan posisi inti, dan Footer ada di bagian bawah. Terdapat banyak variasi yang bisa dibuat dengan Bootstrap, seperti :

• .panel-default : Membuat suatu panel dengan menggunakan warna standar atau abu.

• .panel-primary : Membuat suatu panel menggunakan warna biru tua.

• .panel-success : Membuat suatu panel dengan menggunakan warna header hijau.

• .panel-info : Membuat suatu panel dengan menggunakan warna header biru muda.

• .panel-warning : Membuat suatu panel dengan menggunakan header warna kuning muda.

• .panel-danger : Membuat suatu panel dengan menggunakan warna merah muda.

Itulah beberapa informasi yang berguna untuk kalian simak, dengan membaca artikel ini kami berharap memperluas wawasan yang nantinya sangat berguna untuk kalian di masa mendatang. Untuk mengetahui, dan ingin mempelajari lebih detail mengenai Bootstrap adalah?

Kalian bisa mengikuti program kelas Codeva Indonesia yang akan membantu kalian dalam mengenal seluruh program Bootstrap dan program lainnya. Good Luck!

×