Welcome to Hakim Official!

Make sure to SUBSCRIBE Hakim Nurubay channel guys



SUBSCRIBE !

  1. Home
  2. Content
  3. Tutorial : Cara menggunakan Bootstrap
October 24, 2020

Artikel ini telah dikunjungi 612×


Pengertian dan Cara Menggunakan Bootstrap

thumbnail

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?

DomaiNesia

Cara Menggunakan Bootstrap

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.

  1. bootstrap/
  2. ├── css/
  3. │   ├── bootstrap.css
  4. │   ├── bootstrap.css.map
  5. │   ├── bootstrap.min.css
  6. │   ├── bootstrap.min.css.map
  7. │   ├── bootstrap-theme.css
  8. │   ├── bootstrap-theme.css.map
  9. │   ├── bootstrap-theme.min.css
  10. │   └── bootstrap-theme.min.css.map
  11. ├── js/
  12. │   ├── bootstrap.js
  13. │   └── bootstrap.min.js
  14. └── fonts/
  15.     ├── glyphicons-halflings-regular.eot
  16.     ├── glyphicons-halflings-regular.svg
  17.     ├── glyphicons-halflings-regular.ttf
  18.     ├── glyphicons-halflings-regular.woff
  19.     └── 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.

Cara menginstall Bootstrap secara online

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

  1. <!-- Latest compiled and minified CSS -->
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  3.  
  4. <!-- Optional theme -->
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
  6.  
  7. <!-- Latest compiled and minified JavaScript -->
  8. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Cara menginstall Bootstrap secara offline

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.

thumbnail

Contoh 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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>Cara menggunakan Bootstrap</title>
  5.  
  6.   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  7.   <script type="text/javascript" src="js/jquery.js"></script>
  8.  <script type="text/javascript" src="js/bootstrap.js"></script>
  9.  
  10. </head>
  11. <body>
  12.   <nav class="navbar navbar-default">
  13.   <div class="container-fluid">
  14.     <!-- Brand and toggle get grouped for better mobile display -->
  15.     <div class="navbar-header">
  16.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  17.         <span class="sr-only">Toggle navigation</span>
  18.         <span class="icon-bar"></span>
  19.         <span class="icon-bar"></span>
  20.         <span class="icon-bar"></span>
  21.       </button>
  22.       <a class="navbar-brand" href="#">Brand</a>
  23.     </div>
  24.  
  25.     <!-- Collect the nav links, forms, and other content for toggling -->
  26.     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  27.       <ul class="nav navbar-nav">
  28.         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
  29.         <li><a href="#">Link</a></li>
  30.         <li class="dropdown">
  31.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  32.           <ul class="dropdown-menu">
  33.             <li><a href="#">Action</a></li>
  34.             <li><a href="#">Another action</a></li>
  35.             <li><a href="#">Something else here</a></li>
  36.             <li role="separator" class="divider"></li>
  37.             <li><a href="#">Separated link</a></li>
  38.             <li role="separator" class="divider"></li>
  39.             <li><a href="#">One more separated link</a></li>
  40.           </ul>
  41.         </li>
  42.         <li><a href="#">Link</a></li>
  43.         <li class="dropdown">
  44.           <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
  45.           <ul class="dropdown-menu">
  46.             <li><a href="#">Action</a></li>
  47.             <li><a href="#">Another action</a></li>
  48.             <li><a href="#">Something else here</a></li>
  49.             <li role="separator" class="divider"></li>
  50.             <li><a href="#">Separated link</a></li>
  51.           </ul>
  52.         </li>
  53.       </ul>
  54.     </div><!-- /.navbar-collapse -->
  55.   </div><!-- /.container-fluid -->
  56. </nav>
  57.  
  58. <div class="container">
  59. <div class="jumbotron">
  60.  <center>
  61.   <h1>Hakim Official</h1>
  62.   <p>Maka Tampilannya Menjadi Seperti ini!</p>
  63.   <p><a class="btn btn-primary btn-lg" href="#" role="button">Tombol Blue</a></p>
  64.  </center>
  65. </div>
  66. </div>
  67. </body>
  68. </html>

coba Kalian perhatikan pada contoh cara menghubungkan Bootstrap di atas. untuk menghubungkan file html atau php kalian dengan Bootstrap.css maka seperti ini:


  1. <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.


  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <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


thumbnail

Hasil dari Codingan 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

Avatar
𝓗𝓪𝓴𝓲𝓶 Nurubay

I'm a beginner web programmer, and I like to learn new things, and my passionate is about Music. you can subscribe to My YouTube Channel Hakim Nurubay. Thank you for you guys who have subscribed My YouTube Channel, and I'm glad for it. Greetings !DOCTYPE


Apa itu Bootstrap? Pengertian dan Fungsinya itu apaansih?


Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang situs web dan aplikasi web.
Read More

Apa itu JavaScript? Pengertian dan Fungsinya itu apaansih? apakah JavaScript Punya Sejarah?


JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis.
Read More

Apa itu HTML? apakah HTML Punya Sejarah? apa Perbedaannya HTML dengan HTML5?


Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang dirancang untuk ditampilkan di peramban internet.
Read More

Apa itu CSS? Pengertian dan Fungsinya itu apaansih? Apakah ada Sejarahnya about CSS?


CSS atau Cascading Style Sheet merupakan aturan untuk mengatur beberapa komponen dalam sebuah web
Read More
Flag Counter
ads
ads
DomaiNesia

Related Posts


posts

Cara Membuat Website Sederhana Hanya dengan HTML dan CSS saja!

seperti yang kalian ketahui HTML adalah singkatan dari Hypertext Markup Language. kalian di sini akan melihat tutorial membuatnya.

Lihat

posts

Cara Embed Website ke halaman Website Sendiri Responsive

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

Lihat

posts

Cara Embed Video YouTube AutoPlay Terbaru ke halaman Website Sendiri Responsive

Kalian ingin meng-Embed video YouTube kalian ke sebuah halaman website? dan juga ingin membuatnya AutoPlay? Yuk Sini saya beri source code nya!

Lihat

posts

Coming soon

Gone? Coming soon guys, have a nice day

Lihat