● online
- Motor servo MG996R TowerPro Metal Gear....
- LCD 16x2 / 1602 Display Arduino Raspberry LCD 16 x....
- Dual Volt Amp Meter Digital Ampere Meter Voltmeter....
- Potensiometer 10K - Mono Potensio Meter Linear Res....
- WEMOS D1 MINI PRO BOARD IoT ESP8266 WIFI PAKET LEN....
- Water Level sensor ketinggian air - deteksi air....
- MP3 TF 16P Alternatif DFPlayer mini MP3 Player Ard....
- Arduino Nano V3 Atmega328P CH340G 5V 16Mhz....
- Selamat Datang di Indomaker ❯ Silahkan pesan produk sesuai kebutuhan anda, kami siap melayani.
- Selamat Datang di Indomaker ❯ Silahkan pesan produk sesuai kebutuhan anda, kami siap melayani.
Membangun Website Responsif dan Dinamis dengan Bootsrap
Sejarah Bootstrap
Dikembangkan oleh Jacob Thornton dan Mark Otto Pada awalnya Bootstraps Bernama Twitter Blueprint yang digunakan sebagai framework atau kerangka kerja untuk mendorong konsistensi perangkat internal yang sesuai. Menurut Mark Otto selaku pengembang twitter, sebelum bootstrap sebetulnya sudah ada berbagai framework lain yang sudah banyak tersedia dan digunakan untuk pengembangan antarmuka , tetapi tingkat konsistensi dalam proses pengembangannya buruk dan butuh perawatan yang mahal. Sehingga banyak para developer yang memilih bootstrap sebagai framework karena selain mudah digunakan bootstrap juga dikenal sederhana, ringan dan konsisten. Terbukti hingga saat ini bootstrap sudah mengeluarkan yang terbaru yaitu Bootstrap 4. Bootstrap menjadi framework populer yang digunakan oleh para developer karena dikenal mudah di gunakan, developer hanya perlu memanggil class tertentu untuk membuat navbar, table, pesan peringatan, tombol dan komponen lainnya yang di perlukan dalam pembuatan website dan aplikasi web. Bootstrap terdiri dari beberapa file. File bootstrap berisikan kumpulan – kumpulan baris kode yang tersusun dari CSS dan JavaScript yang dibungkus dengan sebutan Class, jadi Ketika developer membuat suatu tombol , navbar , atau table cukup hanya dengan memanggil salah satu class-nya saja.Cara install Bootstrap
Cara untuk menginstall bootstrap ada beberapa opsi pilihan. Developer dapat menginstall Bootstrap dengan cara offline maupun online. Pada proses instalasi Bootstrap kebanyakan para developer menginstall dengan cara Offline untuk menambahkan Bootstrap ke dalam project mereka namun tidak sedikit pula yang menginstall secara online. Berikut ini beberapa opsi cara untuk menginstall atau menambahkan Bootstrap kedalam project.Install Bootstrap secara offline
Langkah 1 : download bootstrap di website resminya
![](http://indomaker.com/wp-content/uploads/2021/11/Install-Bootstrap-secara-offline.jpg)
Langkah 2 : Ekstrak file bootstrap
Ektrak file bootstrap yang tadi sudah di download ke dalam folder project, dan akan terdapat beberapa file yang ada di dalamnya![](http://indomaker.com/wp-content/uploads/2021/11/file-bootstrap.jpg)
![](http://indomaker.com/wp-content/uploads/2021/11/file-css-bootstrap.jpg)
Langkah 3 : cara menggunakan bootstrap
Agar bootstrap dapat digunakan dalam membuat halaman website buka teks editor dan buatlah file index.html gambarannya seperti ini![](http://indomaker.com/wp-content/uploads/2021/11/index.html-bootstrap.jpg)
<link href="css/bootstrap.min.css" rel="stylesheet">Sampai di sini Anda sudah dapat menggunakan bootstrap untuk mengembangkan website atau aplikasi web.
Install Bootstrap secara Online
Agar bootsrap dapat digunakan dalam dalam membuat halaman website, kunjungi website resmi bootstrap https://getbootstrap.com/ dan klik Documentation pilih Stater template dan click Copy kemudian simpan di teks editor dan run dengan browser maka otomatis akan memanggilnya![](http://indomaker.com/wp-content/uploads/2021/11/starter-template-bootstrap.jpg)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
Namun ada kekuranganya, ketika akan memanggil Bootstrap secara online akan mengurangi tingkat kecepatan website.Cara menggunakan bootstrapBootstrap menyediakan beberapa komponen, Content, Layout yang menunjang pengembangan website agar lebih dinamis serta menarik seperti Navbar, Button, Form dan masih banyak fitur yang ditawarkan bootstrap untuk memudahkan dalam membangun website yang responsif dan dinamis. Misalkan component yang ditawarkan bootstrap seperti : Components Tombol / button bootstrap Tombol adalah suatu komponen yang biasa di gunakan untuk membuat website. Tombol berfungsi untuk mengeksekusi misalnya seperti tombol setuju, simpan dan yang lainnya. Bootstrap juga menyediakan berbagai pilihan tombol yang menarik, Anda cukup dengan memanggil salah satu class tombol button dengan cara panggil classnya Contoh :
<button type="button" class="btn btn-success">Success</button>Maka hasilnya
![](http://indomaker.com/wp-content/uploads/2021/11/tombol-success-bootstrap.jpg)
<button type="button" class="btn btn-warning">Warning</button>Maka hasilnya :
![](http://indomaker.com/wp-content/uploads/2021/11/tombol-danger-bootstrap.jpg)
![](http://indomaker.com/wp-content/uploads/2021/11/table-bootstrap.jpg)
![](http://indomaker.com/wp-content/uploads/2021/11/hasil-table-bootstrap.jpg)
Penutup
Fitur yang di tawarkan bootstrap serta kemudahan dalam menggunakannya, membuat bootstrap menjadi framework yang sering dipakai oleh para developer karena memudahkan dalam membuat tombol, tabel, navbar dan lain sebagainya cukup hanya dengan memberikan panggilan class bootstrap saja maka akan mendapatkan tampilan yang modern dan menarik. Demikian penjelasan dan tutorial bootstrap. Semoga panduan yang diberikan dapat memudahkan Anda selaku developer dalam membangun dan mengembangkan sebuah website.Membangun Website Responsif dan Dinamis dengan Bootsrap
Traffic Light atau lampu lalu lintas adalah lampu yang mampu menertibkan arus lalu lintas jalanan baik kendaraan bermotor, mobil,... selengkapnya
Hallo semua, pada artikel kali saya ini akan membahas kembali seputar push button switch dimana pada artikel yang sebelumnya... selengkapnya
MP3 DFPlayer merupakan sebuah modul elektronik yang berfungsi untuk memainkan sebuah suara yang filenya berketensi MP3. Seperti memutar sebuah... selengkapnya
Android Intent adalah struktur data atau objek yang terdapat deskripsi dari tugas yang akan dijalankan. Salah satu keunggulan dari... selengkapnya
Hallo pada artikel kali ini, saya akan memberikan cara menampilkan teks pada LCD dengan NodeMCU. Bagi anda yang sudah... selengkapnya
LoRa merupakan singkatan dari Long Range, dimana module ini menggunakan frekuensi radio dengan jarak yang jauh dan konsumsi daya... selengkapnya
Apa itu efek autumn? Efek autumn adalah efek musim gugur, dimana dedaunan akan berubah warna dari hijau menjadi coklat... selengkapnya
Pada umumnya sebuah output data dapat kita tampilkan di berbagai platform software maupun hardware. Misalnya pada web, aplikasi android,... selengkapnya
I think I need to make a virtual personal assistant that can help me make a self-service video tutorial... selengkapnya
Hallo, kali ini akan membahas bagaimana cara untuk membuat dimmer menggunakan mosfet D4184 module. Mosfet mempunyai fungsi yaitu untuk... selengkapnya
Arduino Uno adalah board mikrokontroler yang berbasis ATmega328P. Arduino Uno memiliki 14 pin input/output digital (6 di antaranya dapat digunakan… selengkapnya
Rp 144.000Description: TP5100 is a double switch buck 8.4V, single cell 4. 2V lithium battery charge management chip. Its ultra-compact QFN16… selengkapnya
Rp 10.600Kabel jumper Dupont untuk jumper Arduino atau Raspberry Pi 20 cm Male to Male 1 lembar = 40 kabel
Rp 11.300Kabel Jumper Dupont Pelangi 10 cm female to female 1 lembar = 40 kabel
Rp 9.000Kabel jumper Dupont untuk jumper Arduino atau Raspeberry Pi 20 cm Female to female 1 lembar = 40 kabel
Rp 11.300Dimmer AC 220 Volt 4000 Watt + Casing Aluminium Potensiometer untuk mengatur tegangan output min/max pada tegangan AC PLN 220V…. selengkapnya
Rp 52.500Kabel Jumper Dupont Pelangi 10 cm.. male to female 1 lembar isi 40 kabel
Rp 9.000Tang Crimping Press Skun Ratchet YTH SN-48B Model YTH SN-48B FOR NON INSULATED TERMINAL YTH SN-48B dengan mata Press 0.5… selengkapnya
Rp 150.000Temperature and humidity transmitter SHT20 sensor industrial grade high precision temperature and humidity monitoring Modbus RS485 (MD02) MODBUS debugging assistant… selengkapnya
Rp 96.800Features: It is of high power density, high efficiency, high-reliability, small size and lightweight. It can isolate unsteady single-way voltage… selengkapnya
Rp 18.500
Saat ini belum tersedia komentar.