{"id":2974,"date":"2019-01-12T14:06:12","date_gmt":"2019-01-12T14:06:12","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2974"},"modified":"2023-06-12T14:54:56","modified_gmt":"2023-06-12T14:54:56","slug":"tutorial-bootstrap-01-apa-itu-bootstrap","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/tutorial-bootstrap-01-apa-itu-bootstrap\/","title":{"rendered":"Tutorial Bootstrap #01 &#8211; Apa Itu Bootstrap?"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Pada tutorial Bootstrap Part 1 ini akan dijelaskan tentang <strong>Tutorial Bootstrap #01 &#8211; Apa Itu Bootstrap?<\/strong>.\u00a0Bootstrap adalah sebuah\u00a0<strong>library framework CSS<\/strong>\u00a0yang di buat\u00a0khusus untuk bagian pengembangan front-end website.\u00a0bootstrap merupakan salah satu framework HTML, CSS dan\u00a0<strong>javascript<\/strong>\u00a0yang paling populer di kalangan web developer.\u00a0pada saat ini hampir semua web developer telah menggunakan bootstrap untuk membuat tampilan front-end menjadi lebih mudah dan sangat cepat. karena anda hanya perlu menambahkan class-class tertentu untuk misalnya membuat tombol, grid, navigasi dan lainnya.<\/p>\n<p><strong>Bootstrap<\/strong>\u00a0telah menyediakan kumpulan komponen class interface dasar yang telah di rancang sedemikian rupa untuk menciptakan tampilan yang menarik, bersih dan ringan. selain komponen class interface, bootstrap juga memiliki fitur grid yang berfungsi untuk mengatur layout pada halaman website yang bisa digunakan dengan sangat mudah dan cepat. dengan menggunakan bootstrap kita juga di beri keleluasaan dalam mengembangkan tampilan website yang menggunakan\u00a0<strong>bootstrap<\/strong>\u00a0yaitu dengan cara mengubah tampilan bootstrap dengan menambahkan class dan CSS sendiri.<\/p>\n<p>Salah satu contoh\u00a0<strong>website<\/strong>\u00a0besar yang menggunakan\u00a0<strong>framework bootstrap<\/strong> adalah Twitter, tentu anda sudah familiar dengan twitter bukan ? yap, interface twitter di bangun dengan menggunakan bootstrap. karena sebenarnya bootstrap di kembangkan oleh developer twitter sendiri sehingga bootstrap sering juga di sebut \u201ctwitter bootstrap\u201d. Bootstrap berisi kumpulan class yang siap pakai. misalnya anda ingin membuat sebuah tombol dengan cepat dan tana harus merancang dan mengetikkan syntax css untuk membuat sebuah tombol, maka dengan bootstrap anda dapat membuatnya dengan sangat cepat, yaitu hanya dengan menambahkan class \u201cbtn\u201d dan menambahkan class btn tambahan yang akan kita jelaskan pada tutorial selanjutnya di tutorial edisi belajar bootstrap di <span style=\"color: #ff0000;\"><strong><em><a style=\"color: #ff0000;\" href=\"https:\/\/rengga.dev\/blog\/\" target=\"_blank\" rel=\"noopener\">www.rengga.dev\/blog<\/a><\/em><\/strong><\/span><\/p>\n<div>Tentu anda bertanya-tanya kenapa sangat banyak yang telah menggunakan bootstrap dalam pengembangan website. berikut ini akan di jelaskan beberapa kegunaan yang telah menjadi kelebihan pada bootsrap. adapun beberapa kelebihan bootstrap adalah sebagai berikut.<\/div>\n<ul>\n<li>Penggunaan bootstrap sangat menghemat waktu.<\/li>\n<li>Tampilan bootstrap yang sudah cukup terlihat modern.<\/li>\n<li>Mobile Friendly yang maksudnya tampilan bootstrap sudah sangat responsive, yaitu tampilan bootstrap sudah mendukung segala jenis resolusi, baik itu pc, laptop, tablet dan smartphone.<\/li>\n<li>Sangat ringan karena\u00a0bootstrap di buat dengan sangat terstruktur.<\/li>\n<li>Dan masih banyak lagi kelebihan dan kegunaan dari bootstrap yang akan anda temukan sendiri setelah mencoba membangun sebuah aplikasi berbasis web dengan menggunakan bantuan framework css bootstrap.<\/li>\n<\/ul>\n<p>Sebelum di jelaskan tentang cara menggunakan bootstrap, alangkah lebih baik nya jika anda terlebih dahulu mempelajari CSS dasar. Klik di sini untuk membaca tutorial belajar CSS di <span style=\"color: #ff0000;\"><strong><em><a style=\"color: #ff0000;\" href=\"https:\/\/rengga.dev\/blog\/\" target=\"_blank\" rel=\"noopener\">www.rengga.dev\/blog<\/a><\/em><\/strong><\/span><\/p>\n<h2>Cara Menggunakan Bootstrap<\/h2>\n<p>Untuk cara menggunaan bootstrap yang pertama kali yang harus anda lakukan adalah melakukan instalasi bootstrap. anda dapat mendownload langsung bootstrap pada website resminya di\u00a0<a href=\"https:\/\/getbootstrap.com\/getting-started\/\" target=\"_blank\" rel=\"noopener\">http:\/\/getbootstrap.com\/getting-started\/<\/a>.<\/p>\n<figure id=\"attachment_2976\" aria-describedby=\"caption-attachment-2976\" style=\"width: 970px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-2976 size-large\" src=\"https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/screenshot-getbootstrap.com-2022.08.12-22_55_26-1024x403.png\" alt=\"Tutorial Bootstrap #01 - Apa Itu Bootstrap?\" width=\"970\" height=\"382\" srcset=\"https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/screenshot-getbootstrap.com-2022.08.12-22_55_26-1024x403.png 1024w, https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/screenshot-getbootstrap.com-2022.08.12-22_55_26-300x118.png 300w, https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/screenshot-getbootstrap.com-2022.08.12-22_55_26-768x302.png 768w, https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/screenshot-getbootstrap.com-2022.08.12-22_55_26-1536x604.png 1536w, https:\/\/rengga.dev\/blog\/wp-content\/uploads\/2022\/08\/screenshot-getbootstrap.com-2022.08.12-22_55_26.png 1919w\" sizes=\"auto, (max-width: 970px) 100vw, 970px\" \/><figcaption id=\"caption-attachment-2976\" class=\"wp-caption-text\">Tutorial Bootstrap #01 &#8211; Apa Itu Bootstrap?<\/figcaption><\/figure>\n<p>untuk sampai saat ini bootsrap telah di rilis sampai versi 5. klik <a href=\"https:\/\/getbootstrap.com\/docs\/5.2\/getting-started\/download\/\" target=\"_blank\" rel=\"noopener\">di sini\u00a0<\/a>untuk mendapatkan bootstrap versi 5. Berikut ini adalah struktur isi dari bootstrap setelah anda mendownloadnya.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">bootstrap\/\r\n\u251c\u2500\u2500 css\/\r\n\u2502   \u251c\u2500\u2500 bootstrap.css\r\n\u2502   \u251c\u2500\u2500 bootstrap.css.map\r\n\u2502   \u251c\u2500\u2500 bootstrap.min.css\r\n\u2502   \u251c\u2500\u2500 bootstrap.min.css.map\r\n\u2502   \u251c\u2500\u2500 bootstrap-theme.css\r\n\u2502   \u251c\u2500\u2500 bootstrap-theme.css.map\r\n\u2502   \u251c\u2500\u2500 bootstrap-theme.min.css\r\n\u2502   \u2514\u2500\u2500 bootstrap-theme.min.css.map\r\n\u251c\u2500\u2500 js\/\r\n\u2502   \u251c\u2500\u2500 bootstrap.js\r\n\u2502   \u2514\u2500\u2500 bootstrap.min.js\r\n\u2514\u2500\u2500 fonts\/\r\n    \u251c\u2500\u2500 glyphicons-halflings-regular.eot\r\n    \u251c\u2500\u2500 glyphicons-halflings-regular.svg\r\n    \u251c\u2500\u2500 glyphicons-halflings-regular.ttf\r\n    \u251c\u2500\u2500 glyphicons-halflings-regular.woff\r\n    \u2514\u2500\u2500 glyphicons-halflings-regular.woff2<\/pre>\n<p>Sedikit informasi tambahan sebelum anda mendownload <strong>bootstrap<\/strong> anda dapat menentukan sendiri atau meng-costumize bootstrap sesuai dengan keinginan anda.\u00a0<em><strong>Tutorial bootstrap bahasa indonesia untuk pemula<\/strong><\/em>.<\/p>\n<h3>Cara Menginstal Bootstrap<\/h3>\n<p><strong>Cara menginstall bootstrap<\/strong> ada beberapa cara. Anda bisa menginstall bootstrap dengan composer, bower, menggunakan npm, secara offline dan online. Berikut ini contoh perintah untuk menginstall bootstrap menggunakan bower.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">bower install bootstrap<\/pre>\n<p>Untuk menginstall bootstrap menggunakan npm<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">npm install bootstrap<\/pre>\n<p>Install bootstrap dengan composer<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">composer require twbs\/bootstrap<\/pre>\n<p>Tetapi cara yang paling banyak di gunakan adalah dengan cara offline dan online. <em><strong>tutorial bootstrap dasar<\/strong><\/em>.<\/p>\n<h3>Cara menginstall bootstrap secara online<\/h3>\n<p>Anda bisa memilih salah satu dari tiga contoh berikut untuk menginstall bootstrap secara online. syntax berikut bisa anda letakkan pada pada bagian &lt;head&gt; pada halaman HTML anda sama seperti menghubungkan HTML dengan CSS dan Javscript.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!-- Latest compiled and minified CSS --&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap.min.css\" integrity=\"sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7\" crossorigin=\"anonymous\"&gt;\r\n \r\n&lt;!-- Optional theme --&gt;\r\n&lt;link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/css\/bootstrap-theme.min.css\" integrity=\"sha384-fLW2N01lMqjakBkx3l\/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r\" crossorigin=\"anonymous\"&gt;\r\n \r\n&lt;!-- Latest compiled and minified JavaScript --&gt;\r\n&lt;script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\" integrity=\"sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;<\/pre>\n<h3>Cara menginstall boostrap secara offline<\/h3>\n<p><strong>Cara menginstall bootstrap<\/strong> secara offline ini sangat banyak di gunakan oleh pada developer, karena anda dapat bekerja menggunakan bootstrap tanpa harus terkoneksi dengan internet lagi, karena file framework bootstrap sudah terletak pada pc kita sendiri. lain dengan penginstalan bootstrap secara online yang file-file bootstrap nya terletak pada server luar. <strong>Tutorial Bootstrap #01 &#8211; Apa Itu Bootstrap?<\/strong><\/p>\n<p>Setelah anda mendownload framwork css bootstrap kemudian ekstrak pada project anda. di sini saya meletakkannya pada localhost saya dengan alamat <em>http:\/\/localhost\/rengga.dev\/bootstrap\/<\/em><\/p>\n<p>Kemudian untuk menghubungkan atau <strong>menginstall bootstrap<\/strong>\u00a0buat sebuah file\u00a0<strong>HTML<\/strong>\u00a0atau\u00a0<strong>PHP<\/strong> yang akan kita hubungkan dengan bootstrap. di sini saya membuat sebuah file dengan nama index.html. <em><strong>tutorial bootstrap bahasa indonesia untuk pemula.<\/strong><\/em><\/p>\n<p>Bootstrap juga memerlukan jquery karena untuk bagian javascript nya bootstrap menggunakan jquery, jadi jangan lupa untuk menambahkan juga file jquery pada folder js bootstrap atau letakkan sesuai keinginan anda asalkan direktori saat menghubungkan file css dan js nanti sesuai. baca juga\u00a0di sini\u00a0untuk cara\u00a0menggunakan jquery.<\/p>\n<p>index.html<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;Bootstrap Part 1 : Pengertian dan Cara Menggunakan Bootstrap&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/bootstrap.css\"&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"js\/jquery.js\"&gt;&lt;\/script&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"js\/bootstrap.js\"&gt;&lt;\/script&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;h1&gt;Cara Menggunakan Bootstrap | www.malasngoding.com&lt;\/h1&gt;\r\n    &lt;button class=\"btn btn-danger\"&gt;TOMBOL MERAH&lt;\/button&gt;\r\n    &lt;button class=\"btn btn-primary\"&gt;TOMBOL BIRU&lt;\/button&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Dapat diperhatikan pada contoh cara menghubungkan file <strong>bootstrap<\/strong>\u00a0di atas. untuk menghubungkan file html atau php anda dengan bootstrap.css<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/bootstrap.css\"&gt;<\/pre>\n<p>Kemudian hubungkan file html atau php anda dengan bootstrap.js dan jquery.js. ingat letakkan jquery.js pada bagian atas karena bootstrap bekerja menggunakan bantuan jquery bukan jquery menggunakan bantuan bootstrap.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;script type=\"text\/javascript\" src=\"js\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/bootstrap.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>Kemudian class \u201cbtn\u201d pada element &lt;button&gt; di atas merupakan<strong>\u00a0class bootstrap<\/strong> yang bisa di gunakan untuk membuat tombol. dan \u201cbtn-danger\u201d dan \u201cbtn-primary\u201d untuk menentukan warna dari tombol yang ingin kita buat. kita tidak membahas tentang cara membuat tombol dengan bootstrap pada tutorial ini karena untuk cara membuat tombol dengan bootstrap akan kita bahas pada tutorial selanjutnya di tutorial edisi belajar bootstrap dasar di <span style=\"color: #ff0000;\"><strong><em><a style=\"color: #ff0000;\" href=\"https:\/\/rengga.dev\/blog\/\" target=\"_blank\" rel=\"noopener\">www.rengga.dev\/blog<\/a><\/em><\/strong><\/span>. <strong>Tutorial Bootstrap #01 &#8211; Apa Itu Bootstrap?<\/strong><\/p>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/abYaPyK?default-tab=result&amp;theme-id=dark\" height=\"300\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/abYaPyK\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>Sekianlah tutorial belajar bootstrap part 1 : <strong>Tutorial Bootstrap #01 &#8211; Apa Itu Bootstrap?<\/strong> untuk tutorial bootstrap selanjutnya akan di bahas\u00a0 di <span style=\"color: #ff0000;\"><strong><em><a style=\"color: #ff0000;\" href=\"https:\/\/rengga.dev\/blog\/\" target=\"_blank\" rel=\"noopener\">www.rengga.dev\/blog<\/a><\/em><\/strong><\/span><\/p>\n<p>NOTE : Perhatikan letak direktori file css dan js bootstrap dan jquery pada saat anda menghubungkannya. Anda juga tidak perlu menghubungkan seluruh isi bootstrap, yang hanya perlu di hubungkan adalah file bootstrap.css dan bootstrap.js.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Pada tutorial Bootstrap Part 1 ini akan dijelaskan tentang <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/tutorial-bootstrap-01-apa-itu-bootstrap\/\" title=\"Tutorial Bootstrap #01 &#8211; Apa Itu Bootstrap?\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3843,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[247,107,12],"tags":[248,250,251,249,237],"newstopic":[576,573,571],"class_list":{"0":"post-2974","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-bootstrap","8":"category-frameworks","9":"category-web-development","10":"tag-bootstrap","11":"tag-cara-instal-bootstrap","12":"tag-cara-menginstal-bootstrap","13":"tag-tutorial-bootstrap","14":"tag-web-development","15":"newstopic-bootstrap","16":"newstopic-css","17":"newstopic-javascript"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2974","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2974"}],"version-history":[{"count":7,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2974\/revisions"}],"predecessor-version":[{"id":3279,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2974\/revisions\/3279"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3843"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2974"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2974"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2974"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2974"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}