Home » How To » Cara Membuat Website Sederhana Dengan Bootstrap 3

Cara Membuat Website Sederhana Dengan Bootstrap 3

by Hanifah Nurbaeti
by Hanifah Nurbaeti

Di bawah ini kita akan mempelajari cara membuat situs web responsif dengan Bootstrap CSS Framework.

Buat Situs Web dengan Bootstrap

Bootstrap adalah kerangka kerja/framework HTML, CSS dan JavaScript paling populer untuk mengembangkan situs web yang responsif dan memprioritaskan tampilan seluler. Bootstrap sepenuhnya gratis untuk diunduh dan digunakan.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>Website Dengan Menggunakan Bootstrap 3</h1>
  <p>Ubah ukuran halaman responsif ini untuk melihat efeknya!</p> 
</div>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebsiteKu</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h2>Tentang Saya</h2>
      <h5>Foto saya:</h5>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/02/136-1369892_avatar-people-person-business-user-man-character-avatar.png" style="width:250px;"></div><br><br>
      <p>Hai Teman-Teman Semua!</p>
      <h3>Sebuah Link Di sini!</h3>
      <p>Beberapa link.</p>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
    <div class="col-sm-8">
      <h2>Hello Word(Anime, Movie)</h2>
      <h5>Rilis, 7 November 2019</h5>
      <div class="fakeimg"><img src="https://dosenit.com/wp-content/uploads/2021/01/anime-hello-world.jpg"  style="width:500px;" ></div><br><br>
      <p>Sinopsis</p>
      <p>Film ini akan menjadi kisah perjalanan waktu yang ditetapkan pada tahun 2027 di Kyoto, Jepang. Dikatakan sebagai cerita bahwa "tidak ada yang pernah melihat seseorang menemukan diri mereka" meskipun dengan "adegan, pandangan, dan cahaya yang semua orang tahu.</p>
      <br>
      <h2>Sprited Away</h2>
      <h5>Rilis,20 Juli 2001</h5>
      <div class="fakeimg" ><img src="https://dosenit.com/wp-content/uploads/2021/01/SpiritedAway.jpg"  style="width:500px;" ></div><br><br><br><br>
      <p>Sinopsis</p>
      <p>Kisah seorang gadis berumur 10 tahun bernama Chihiro dan kedua orangtuanya yang masuk ke sebuah tempat yang terlihat sebagai sebuah taman hiburan yang terabaikan. Setelah kedua orangtuanya berubah menjadi babi raksasa, Chihiro bertemu dengan sosok misterius Haku yang menjelaskan kepadanya bahwa tempat mereka berada adalah sebuah resort di mana makhluk supernatural berisitrahat dari alam duniawi. Untuk dapat membebaskan kedua orangtuanya, Chihiro harus bekerja di sebuah bath house yang dikepalai oleh penyihir bernama Yubaba..</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>

</body>
</html>

You may also like