» » Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh

Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh

Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh - Hay berjumpa lagi sahabat setia ATC Arul Ajeh, Pada Artikel kali ini dengan judul Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh, kami telah menyiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi artikel Artikel bootstrap, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh
link : Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh

Baca juga


Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh


Anda suka oprek-oprek desain web? ingin memperdalam desain web? atau mau nyoba-nyoba bikin desain web? gimana si caranya? anda tidak salah membaca postingan ini.

Tren yang begitu sangat populer dikalangan web developer adalah tren membuat tampilan web yang responsive, yang dapat di akses dari HP dan tampilannya menyesuaikan dengan lebar layar. Jadi seorang web developer mereka tidak usah membuat dua desain satu buat di PC dua buat di HP.

Untuk dapat membuat desain web yang responsive kita tidak usah repot-repot membuat library yang rumit, makanya postingan ini cocok untuk pemula yang ingin memperdalam di desain web.

Mempelajari desain web yang responsive tidak segampang apa yang diucapkan, mungkin anda memerlukan waktu yang lebih lama untuk mempelajarinya. Anda harus mempelajari HTML5, CSS3 dan JS. Apakah ada cara yang lebih mudah? tentu ada yaitu dengan menggunakan framework yang siap pakai seperti bootstrap.

Oke katakan saja anda sudah mengetahui dasar-dasar tentang HTML dan CSS, jika belum anda harus memperlajari terlebih dahulu dasar-dasar. untuk mempelajari dasar dasar anda bisa mempelajarinya disini  .


Apa itu Bootsrap?

Jika diibaratkan kedalam permainan, bootstrap diibaratkan seperti lego yang siap kita bentuk menjadi apapun. Bootstrap merupakan framework HTML5 dan CSS3 yang gratisan dan open source jadi siapa saja bisa mengunduhnya dan dimodifikasi sesuai yang kita inginkan, jadi tetap saja untuk membuat desain web kita perlu menggunakan kreativitas yang tinggi. Dari pengalaman saya ketika membuat website hal yang paling lama dikerjakan ya desain web nya.

Bootstrap ini pada awalnya di buat oleh 2 orang karyawan twitter yaitu Otto dan Jacob Thornton untuk membantu developer utama twitter dalam mengembangkan tampilan UI situs twitter. Saat ini bootstrap semakin berkembang dan luar biasa juga lebih fleksible.

Menggunakan bootstrap ini akan mempermudah anda dalam mendesain halaman web karena dalam pengaksesan CSS dan JS sudah dipersiapkan. Anda tinggal mempelajari sedikit sedikit saja.

Cara Menggunakan Bootstrap

Pertama anda harus mengundul paket bootstrapnya disini  . Sambil menunggu download.an selesai anda juga harus mempersiapkan tools yang akan di gunakan, seperti notepad++ atau sublime text 2 untuk editornya. Jika anda belum mempunyai text editornya bisa anda unduh disini.

Jika bootstrap selesai diunduh anda siapkan satu folder misalnya sample ekstrak bootstrap di folder sample .

stuktur paketan bootstrap akan seperti ini :
sample/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

setelah itu kita buat file dan berinama index.html . dan masukan script dasar html yang akan di bagun dan ini kode nya.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

     
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

selanjutnya ada cari tag </title> dan simpan script ini percis dibawahnya

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.theme.css" rel="stylesheet">
ini merupakan script untuk memanggil CSS yang telah kita dapat dari bootstrap utnuk mempercantik tampilan. kalo di ibaratkan scrip yang pertama adalah badan dan scrip CSS adalah bajunya

selanjutnya anda bisa lihat komponen komponen atau script script html tambahan untuk disesuaikan dengan desain yang anda inginkan disini. Karena ini merupakan contoh sebagai bahan pembelajaran jadi saya wakili saja untuk memilih komponen-komponennya.
sekarang cari tag <body> dan tambahkan lagi script yang didapat dari link diatas dan simpan tepat dibawah tag <body>

<div class="container">

</div>
class container ini berguna untuk membatasa halaman atau bisa dibilang layout.
selanjutnya tambahkan didalam class container atau lebih tepatnya dibawah class="container" dan sebelum tag </div>

<br>
  <nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

dan tambahkan lagi dibawah nya

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://lh3.googleusercontent.com/oPXiJrSPpYsAeXlAe4917zPobrA8HY_e4nTPxxllBBeSJXSWxnvxmzoFTeC4kKvsVPw9-Q=s64" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus
  </div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://lh3.googleusercontent.com/oPXiJrSPpYsAeXlAe4917zPobrA8HY_e4nTPxxllBBeSJXSWxnvxmzoFTeC4kKvsVPw9-Q=s64" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus
 <div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://lh3.googleusercontent.com/oPXiJrSPpYsAeXlAe4917zPobrA8HY_e4nTPxxllBBeSJXSWxnvxmzoFTeC4kKvsVPw9-Q=s64" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus
  </div>
</div>
  </div>
  <div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://lh3.googleusercontent.com/oPXiJrSPpYsAeXlAe4917zPobrA8HY_e4nTPxxllBBeSJXSWxnvxmzoFTeC4kKvsVPw9-Q=s64" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus
  </div>
</div>
<div class="media">
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus
  </div>
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://lh3.googleusercontent.com/oPXiJrSPpYsAeXlAe4917zPobrA8HY_e4nTPxxllBBeSJXSWxnvxmzoFTeC4kKvsVPw9-Q=s64" alt="...">
    </a>
  </div>
</div>
</div>
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="https://lh3.googleusercontent.com/oPXiJrSPpYsAeXlAe4917zPobrA8HY_e4nTPxxllBBeSJXSWxnvxmzoFTeC4kKvsVPw9-Q=s64" alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus
  </div>
</div>
<br>

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
         copyright
      </a>
    </div>
  </div>
</nav>

save file index.html tersebut dan sekarang klik untuk melihat hasilnya dibrowser

jika berhasil maka tampilannya akan seperti ini


Desain ini belum sempurna, jadi tinggal andalah yang berkreasi sendiri.
Selamat mencoba :D
oh iya jangan lupa untuk cek www.Shopious.com


Selesai deh Artikel Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh

Sekian dulu ya artikel Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh kali ini, Semoga bisa memberi manfaat untuk kalian semua. Oke, sampai berjumpa lagi di artikel lainnya.

Anda saat ini membaca artikel Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh dengan url https://advancedteamcode.blogspot.com/2015/05/cara-membuat-desain-web-dengan.html

0 Response to "Cara Membuat Desain Web dengan Bootstrap By Arul Ajeh"

Post a Comment

Subscribe to: Post Comments (Atom)