Bagaimana cara menginstal bootstrap secara online?

Table of Contents

Table of Contents Show

Cara Menggunakan Bootstrap dengan ReactJS
Membuat Project React
1. Menggunakan Bootstrap CDN
2. Menginstall Bootstrap melalui NPM
Langkah langkah menginstal bootstrap?
Apakah bootstrap harus di download?
Framework bootstrap terdiri dari file apa saja?
Bootstrap itu apa sih?
Bagaimana cara melakukan instalasi bootstrap?
Apa alamat web resmi bootstrap?
Framework Bootstrap terdiri dari file apa saja?
Bootstrap itu apa sih?

Cara Menggunakan Bootstrap dengan ReactJS
Membuat Project React
1. Menggunakan Bootstrap CDN
2. Menginstall Bootstrap melalui NPM
Langkah langkah menginstal bootstrap?
Apakah bootstrap harus di download?
Framework bootstrap terdiri dari file apa saja?
Bootstrap itu apa sih?

Cara Menggunakan Bootstrap dengan ReactJS

Image from Google

Pada tulisan kali ini kita akan membahas bagaimana cara menggunakan Bootstrap dengan ReactJS.

Bootstrap merupakan Framework CSS yang digunakan untuk membuat aplikasi yang responsive.

ReactJS merupakan Framework JavaScript yang digunakan untuk membuat aplikasi SPA (Single Page Application).

Saat ini, Bootstrap tidak dapat dipisahkan dalam pembuatan website, sehingga ada kalanya kita menggabungkan ReactJS dan Bootstrap dalam pengembangan website.

Terdapat beberapa cara yang umum digunakan untuk menambahkan Bootstrap ke React:

Menggunakan Bootstrap CDN.
Menginstall Bootstrap melalui NPM.
Menggunakan React Bootstap.

Membuat Project React

Buat project ReactJS terlebih dahulu:

Buat project ReactJS: create-react-app react-bootstrap.
Masuk ke Projek react-bootstrap: cd react-bootstrap
Jalankan Projek react-bootstrap: sudo npm start

Halaman utama

Selanjutnya kita akan mengedit App.js.

Buka file App.jsyang berada di dalam folder src.

Lalu edit menjadi seperti kode di bawah ini

import React from 'react';function App() {
  return (
    <div className="App">
      <h2>React JS</h2>
      <button>Submit</button>
    </div>
  );
}export default App;

Lalu save perubahan tersebut, dan liat hasilnya di browser.

Halaman web tanpa Bootstap

Terlihat bahwa ditampilkan dua buah element yaitu element h2 dan element button.

Selanjutnya kita akan menggunakan Bootstrap di ReactJS dan akan melihat perbedaan pada dua buah element tersebut.

1. Menggunakan Bootstrap CDN

Cara yang paling mudah adalah menggunakan Bootstrap CDN

Buka terlebih dahulu website bootstrap: getbootstrap.com.

Lalu copy link bootstrap cdn ke folder public/index.html.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Buka file public/index.html.

Lalu tambahkan di dalam tag head.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Sekarang, kita bisa menggunakan Bootstrap dengan ReactJS.

Simpan perubahan tersebut, lalu lihat kembali hasilnya di web browser.

Halaman web yang sudah menggunakan Bootstrap

Apakah terlihat perubahannya? jika tidak mari kita tambahkan beberapa class bootstrap.

Buka kembali file src/App.js.

Kemudian edit menjadi kode berikut

import React from 'react';function App() {
  return (
    <div className="App container">
      <h2 className="text-danger">React JS</h2>
      <button className="btn btn-primary">Submit</button>
    </div>
  );
}export default App;

Kemudian save, dan lihat perubahan di web browser kembali.

Halaman Web yang sudah menggunakan Bootstrap

Sekarang terlihat perbedaannya, kita telah berhasil menggunakan Bootstrap dan ReactJS.

Selanjutnya, kita akan menggunakan cara kedua yaitu menginstall bootstap melalui npm.

2. Menginstall Bootstrap melalui NPM

Cara selanjutnya adalah menginstall bootstrap melalui NPM.

Sebelum melanjutkan, terlebih dahulu kita menghapus link css bootstrap yang dipasang melalui CDN pada file public/index.html.

Simpan perubahan, dan lihat hasilnya pada web browser.

Halaman web tanpa Bootstap

Tampilan akan tampil seperti semula tanpa menggunakan Bootstrap.

Selanjutnya buka terminal dan arahkan ke dalam folder project react-bootstrap.

Install bootstrap: sudo npm install bootstap.

Setelah menginstall bootstrap, kita meng-import file bootstrap ke dalam file public/index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css'
import App from './App';
import * as serviceWorker from './serviceWorker';

Kita mengimport file bootstap.min.css ke dalam file index.js.

Simpan perubahan, dan lihat hasilnya di web browser.

Halaman web menggunakan Bootstrap

Sekian cara menggunakan Bootstrap dengan ReactJS.

Langkah langkah menginstal bootstrap?

Cara menginstall Bootstrap secara offline Cara pertama download framework bootstrap di situs officialnya yaitu getbootstrap.com, jika sudah klik tombol Download untuk mendownload nya. 3. Jika sudah anda akan mendownload source code css dan js framework bootstrap. 4. Extract file bootstrap ke document anda.

Apakah bootstrap harus di download?

Untuk dapat menggunakan bootstrap hal yang harus dilakukan yaitu mendownloadnya terbih dahulu. Bootstrap dapat di download dalam bentuk standar di halaman website bootsrap, selain itu download bootstrap dapat juga dalam bentuk template bootsrap yang telah di modifikasi.

Framework bootstrap terdiri dari file apa saja?

Bootstrap terdiri dari kumpulan syntax yang dikompilasi dalam tiga file utama: Bootstrap.css, Bootstrap.js, dan Glyphicons. Perlu diingat bahwa Bootstrap memerlukan library JS yang disebut jQuery untuk menjalankan plugin dan komponen JS.

Bootstrap itu apa sih?

Bootstrap adalah sebuah framework HTML, CSS, dan JavaScript yang berfokus untuk menyederhanakan pengembangan halaman web atau website. Pada umumnya, Bootstrap digunakan untuk mengimplementasikan berbagai pilihan warna, ukuran, font, dan layout yang ada dalam framework tersebut ke dalam sebuah website.

Bagaimana cara melakukan instalasi bootstrap?

Cara menginstall Bootstrap secara offline.

Cara pertama download framework bootstrap di situs officialnya yaitu getbootstrap.com, jika sudah klik tombol Download untuk mendownload nya..

Jika sudah otomatis anda akan membuka tab situs download dan pilih tombol download yang ada di Compiled CSS and JS..

Apa alamat web resmi bootstrap?

anda dapat mendownload langsung bootstrap pada website resminya di http://getbootstrap.com/getting-started/. untuk sampai saat ini bootsrap telah di rilis sampai versi 4. klik di sini untuk mendapatkan bootstrap versi 4. berikut ini adalah struktur isi dari bootstrap setelah anda mendownloadnya.