Make sure to SUBSCRIBE Hakim Nurubay channel guys
Artikel ini telah dikunjungi 2110×
Seperti yang Kalian ketahui Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta juga ekstensi opsional JavaScript. Jika Kalian ingin mengetahui lebih lanjut tentang Bootstrap Kalian bisa
Baca di sini : Apa itu Bootstrap? Pengertian dan Fungsinya itu apaansih?
Untuk cara menggunakan Bootstrap pertama kali yang kalian harus lakukan adalah mendownload Bootstrap pada website resminya di sini. Setelah itu kalian akan melakukan instalasi Bootstrap.
Saat ini Bootstrap telah rilis sampai versi 4.5.3. Kurang lebih seperti ini struktur dari isi Bootstrap setelah anda mendownloadnya.
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
Oh iya guys bagi pengguna Bootstrap nih pasti udah ada yang pada tau kan kalau ada yang namanya Bootstrap Component nah Bootstrap Component itu adalah Component yang telah disediakan oleh Bootstrap, kalian bisa dapatkan Component tersebut di sini.
anda bisa memilih salah satu dari tiga contoh berikut untuk menginstall Bootstrap secara online. syntax berikut kalian letakkan sebelum </head> pada coding HTML, cara itu sama seperti kalian menghubungkan HTML dengan CSS dan JavaScript
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Nah untuk cara menginstall Bootstrap secara offline ini adalah cara yang paling banyak digunakan oleh para developer, karena jika kita menggunakan Bootstrap secara offline, kita dapat menggunakannya tanpa internet, dan bahkan saat kita membuat template website dengan Bootstrap kita bisa juga tanpa koneksi internet. Karena file framework Bootstrap sudah terletak pada PC kalian sendiri. Beda lagi dengan Kita menginstall Bootstrap secara online yang file-file Bootstrap nya terletak pada server luar, bisa dikatakan di internet.
Setelah kalian mendownload file-file Bootstrap yang berada menjadi satu di dalam archive zip atau rar, kemudian Kalian ekstrak pada Project Kalian. nah berikut beberapa contoh file-file Bootstrap.
kebetulan versi Bootstrap yang ada di atas adalah versi Bootstrap yang saya gunakan sekarang yaitu versi 3.4.1. Kemudian untuk menghubungkannya kalian buat sebuah file HTML atau PHP yang akan kalian hubungkan dengan Bootstrap. Kalau di sini saya membuat sebuah file dengan nama index.html.
*Penting* Bootstrap juga memerlukan Jquery karena untuk bagian JavaScript nya Bootstrap menggunakan Jquery, jadi Kalian jangan lupa untuk menambahkan juga file Jquery pada folder JS Bootstrap.
index.html
<!DOCTYPE html> <html> <head> <title>Cara menggunakan Bootstrap</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div class="jumbotron"> <center> <h1>Hakim Official</h1> <p>Maka Tampilannya Menjadi Seperti ini!</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Tombol Blue</a></p> </center> </div> </div> </body> </html>
coba Kalian perhatikan pada contoh cara menghubungkan Bootstrap di atas. untuk menghubungkan file html atau php kalian dengan Bootstrap.css maka seperti ini:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
nah kemudian untuk menghubungkan file html atau php kalian dengan bootstrap.js dan jquery.js. Perlu di ingat letakkan jquery.js pada bagian atas karena Bootstrap bekerja menggunakan bantuan Jquery, bukan Jquery menggunakan bantuan Bootstrap. Jangan sampai tertukar ya Guys hihihi.
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>
Kemudian class "navbar" pada element <Nav> di atas tadi merupakan sebuah component yang telah disediakan oleh Bootstrap yang digunakan untuk membuat Navbar atau Navigasi Bar yang ada di atas(header). Nah untuk untuk class "jumbotron" pada element <div> gunanya memunculkan kotak an besar seperti yang akan saya tampilkan dibawah ini.
berikut adalah hasil dari index.html di atas tadi
Jika Kalian ingin Request membuat artikel, silakan tuliskan di kolom komentar di bawah ini!
Sekian dari saya. Terima Kasih telah berkunjung ke artikel ini.
kunjungan anda adalah Tamu Kami!
Salam !DOCTYPE
Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web.
Read More
Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet.
Read More
CSS atau Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web
Read More
seperti yang kalian ketahui HTML adalah singkatan dari Hypertext Markup Language. kalian di sini akan melihat tutorial membuatnya.
Kalian ingin meng-Embed sebuah website ke halaman website Kalian sendiri, dan Kalian tidak tahu cara membuatnya? di sini saya akan memberi tahu caranya meng-Embed Website
Kalian ingin meng-Embed video YouTube kalian ke sebuah halaman website? dan juga ingin membuatnya AutoPlay? Yuk Sini saya beri source code nya!