Langkah selanjutnya dalam mempelajari framework Bootstrap adalah membuat template dasar bagi pemula. Kita belajar dari contoh yang ada di http://getbootstrap.com/examples/starter-template/ .

Dari informasi yang ada di http://getbootstrap.com/examples/starter-template/ kita akan belajar dengan langkah-langkah

  1. Pada folder ./dist silahkan membuat file baru yaitu coba02.html dengan isi seperti berikut ini:
    <!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″>
        <meta name=”description” content=””>
        <meta name=”author” content=””>

        <title>Template pemula</title>

        <!– Bootstrap core CSS –>
        <link href=”./css/bootstrap.min.css” rel=”stylesheet”>

        <!– Custom styles for this template –>
        <link href=”starter-template.css” rel=”stylesheet”>

      </head>

      <body>

        <div class=”navbar navbar-inverse navbar-fixed-top” role=”navigation”>
          <div class=”container”>
            <div class=”navbar-header”>
              <button type=”button” class=”navbar-toggle collapsed” data-toggle=”collapse” data-target=”.navbar-collapse”>
                <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=”#”>Nama Project</a>
            </div>
            <div class=”collapse navbar-collapse”>
              <ul class=”nav navbar-nav”>
                <li class=”active”><a href=”#”>Home</a></li>
                <li><a href=”#about”>About</a></li>
                <li><a href=”#contact”>Contact</a></li>
              </ul>
            </div><!–/.nav-collapse –>
          </div>
        </div>

        <div class=”container”>

          <div class=”starter-template”>
            <h1>Template Bootstrap untuk pemula</h1>
            <p class=”lead”>Gunakan ini untuk cara cepat memulai project<br> Anda akan mendapatkan inti dari dokumen HTML</p>
          </div>

        </div><!– /.container –>

        <!– Bootstrap core JavaScript
        ================================================== –>
        <!– Placed at the end of the document so the pages load faster –>
        <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
        <script src=”./js/bootstrap.min.js”></script>
      </body>
    </html>

  2. Pada folder ./dist silahkan membuat file starter-template.css
    body {
      padding-top: 50px;
    }
    .starter-template {
      padding: 40px 15px;
      text-align: center;
    }
  3. Hasilnya dapat dilihat http://aris.proweb.asia/dist/coba02.html  dengan tampilan

    Desktop browser:

    Mobile Browser:

Informasi lebih lanjut silahkan mengunjungi:
1. http://getbootstrap.com/examples/starter-template/
2. http://getbootstrap.com/getting-started/ .

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

Template Bootstrap untuk pemula
× Ada yang dapat saya bantu ? Available on SundayMondayTuesdayWednesdayThursdayFridaySaturday