{"id":248,"date":"2019-08-16T10:23:19","date_gmt":"2019-08-16T10:23:19","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=248"},"modified":"2019-09-03T10:49:09","modified_gmt":"2019-09-03T10:49:09","slug":"bootstrap-pengenalan","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/","title":{"rendered":"Bootstrap : Pengenalan"},"content":{"rendered":"\n

Bootstrap adalah framework front-end yang powerful untuk\npengembangan web yang lebih cepat dan lebih mudah. Hal ini termasuk template\ndesain berbasis HTML dan CSS untuk membuat komponen antarmuka pengguna yang\numum seperti form, button, navigasi, dropdown, alert, modals, tab, accordion, carousel,\ntooltips, dan sebagainya.<\/p>\n\n\n\n

Bootstrap memberi kalian kemampuan untuk membuat tata letak\nweb yang fleksibel dan responsif dengan upaya yang jauh lebih sedikit.<\/p>\n\n\n\n

Bootstrap awalnya dibuat oleh seorang desainer dan developer\ndi Twitter pada pertengahan 2010. Sebelum menjadi open-sourced framework,\nBootstrap dikenal sebagai Twitter Blueprint.<\/p>\n\n\n\n

Kalian dapat menghemat banyak waktu dan upaya dengan Bootstrap. Jadi bookmark situs web ini dan lanjutkan.<\/p>\n\n\n\n

Tips:<\/em><\/strong> Tutorial Bootstrap kami akan membantu kalian mempelajari fitur-fitur dasar dan lanjutan Bootstrap selangkah demi selangkah melalui penjelasan yang mudah dipahami dari setiap topik. Jika kalian seorang pemula, mulailah dengan dasar-dasar dan secara bertahap bergerak maju dengan belajar sedikit demi sedikit setiap harinya.<\/p>\n\n\n\n

Yang Dapat Kalian Lakukan dengan Bootstrap<\/h5>\n\n\n\n

Ada banyak hal yang dapat Kalian lakukan dengan Bootstrap,\nseperti:<\/p>\n\n\n\n

  • Kalian dapat dengan mudah membuat situs web responsif.<\/li>
  • Kalian dapat dengan cepat membuat layout multi-kolom dengan kelas yang telah ditentukan.<\/li>
  • Kalian dapat dengan cepat membuat berbagai jenis form layout.<\/li>
  • Kalian dapat dengan cepat membuat variasi navigasi bar yang berbeda.<\/li>
  • Kalian dapat dengan mudah membuat komponen seperti accordion, modal, dll. Tanpa menulis kode JS apa pun.<\/li>
  • Kalian dapat dengan mudah membuat tab dinamis untuk mengelola sejumlah besar konten.<\/li>
  • Kalian dapat dengan mudah membuat tooltips dan popover untuk menampilkan hint text.<\/li>
  • Kalian dapat dengan mudah membuat carousel atau image slider untuk memamerkan konten Kalian.<\/li>
  • Kalian dapat dengan cepat membuat berbagai jenis alert box.<\/li><\/ul>\n\n\n\n

    Tidak hanya itu, ada banyak hal menarik lainnya yang dapat Kalian lakukan dengan Bootstrap. Kalian akan mempelajari semuanya secara rinci di bab-bab mendatang.<\/p>\n\n\n\n

    Keuntungan Menggunakan Bootstrap<\/h5>\n\n\n\n

    Jika kalian memiliki pengalaman dengan front-end framework, kalian mungkin bertanya-tanya apa yang membuat Bootstrap begitu istimewa. Berikut adalah beberapa keuntungan mengapa seseorang harus memilih Bootstrap framework:<\/p>\n\n\n\n

    • Menghemat banyak waktu<\/strong> – Kalian dapat menghemat banyak waktu dan upaya dengan menggunakan templat dan kelas desain yang telah ditentukan oleh Bootstrap dan berkonsentrasi pada pekerjaan pengembangan lainnya.<\/li>
    • Fitur responsif<\/strong> – Menggunakan Bootstrap kalian dapat dengan mudah membuat situs web responsif yang munculnya lebih akurat di berbagai perangkat dan resolusi layar yang berbeda tanpa ada perubahan markup.<\/li>
    • Desain yang konsisten<\/strong> – Semua komponen Bootstrap berbagi templat dan gaya desain yang sama melalui central library, sehingga desain dan tata letak halaman web kalian akan konsisten.<\/li>
    • Mudah digunakan<\/strong> – Bootstrap sangat mudah digunakan. Siapa pun yang memiliki pengetahuan dasar tentang HTML, CSS, dan JavaScript dapat memulai pengembangan dengan Bootstrap.<\/li>
    • Kompatibel dengan browser<\/strong> – Bootstrap dibuat dengan mempertimbangkan web browser modern dan kompatibel dengan semua browser modern seperti Chrome, Firefox, Safari, Internet Explorer, dll.<\/li>
    • Open Source<\/strong> – Dan yang terbaik adalah, sepenuhnya gratis untuk diunduh dan digunakan.<\/li><\/ul>\n\n\n\n
      Tutorial ini Meliputi<\/h5>\n\n\n\n

      Seri tutorial Bootstrap ini mencakup semua fitur framework\nbootstrap, dimulai dengan dasar-dasar, seperti grid system, mekanisme gaya\ntipografi, metode gaya form, serta teknik penataan elemen antarmuka pengguna\n(user interface) seperti tabel, daftar, gambar, dll. <\/p>\n\n\n\n

      Selanjutnya kalian akan belajar cara memanfaatkan komponen Bootstrap yang siap pakai seperti input group, button group, media object, navbar, panel, pagination, label dan badge, progress bar, dll. Serta cara mengcustom hal tersebut untuk membuat variasi yang berbeda.<\/p>\n\n\n\n

      Terakhir, kalian akan menjelajahi beberapa fitur canggih Bootstrap seperti membuat modal window, tab dinamis, tooltips, alert, accordion menu, carousel, scrollspy, dll. Serta cara mengcustom atau memperluas fungsionalitas yang ada menggunakan opsi dan metode yang tersedia.<\/p>\n\n\n\n

      <\/p>\n","protected":false},"excerpt":{"rendered":"

      Bootstrap adalah framework front-end yang powerful untuk pengembangan web yang lebih cepat dan lebih mudah. Hal ini termasuk template desain berbasis HTML dan CSS untuk<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-248","post","type-post","status-publish","format-standard","hentry","category-bootstrap"],"yoast_head":"\nBelajar Bootstrap : Pengenalan - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Bootstrap : Pengenalan - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Bootstrap adalah framework front-end yang powerful untuk pengembangan web yang lebih cepat dan lebih mudah. Hal ini termasuk template desain berbasis HTML dan CSS untuk\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-16T10:23:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T10:49:09+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"Bootstrap : Pengenalan\",\"datePublished\":\"2019-08-16T10:23:19+00:00\",\"dateModified\":\"2019-09-03T10:49:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/\"},\"wordCount\":567,\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/\",\"name\":\"Belajar Bootstrap : Pengenalan - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"datePublished\":\"2019-08-16T10:23:19+00:00\",\"dateModified\":\"2019-09-03T10:49:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/bootstrap-pengenalan\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap : Pengenalan\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Bootstrap : Pengenalan - WebHozz Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Bootstrap : Pengenalan - WebHozz Code","og_description":"Bootstrap adalah framework front-end yang powerful untuk pengembangan web yang lebih cepat dan lebih mudah. Hal ini termasuk template desain berbasis HTML dan CSS untuk","og_url":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/","og_site_name":"WebHozz Code","article_published_time":"2019-08-16T10:23:19+00:00","article_modified_time":"2019-09-03T10:49:09+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"Bootstrap : Pengenalan","datePublished":"2019-08-16T10:23:19+00:00","dateModified":"2019-09-03T10:49:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/"},"wordCount":567,"articleSection":["Bootstrap"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/","url":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/","name":"Belajar Bootstrap : Pengenalan - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"datePublished":"2019-08-16T10:23:19+00:00","dateModified":"2019-09-03T10:49:09+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/bootstrap-pengenalan\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"Bootstrap : Pengenalan"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/248","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=248"}],"version-history":[{"count":3,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/248\/revisions"}],"predecessor-version":[{"id":345,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/248\/revisions\/345"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}