1

Membuat Boostrap pada HTML

Posted by Unknown on 08.51


1. download file css dan js di bootstrap
cara menyusun foldernya simpan file html nanti dalam 1 folder dengan bootstrap:
               Folder
                        bootstrap/
                                     css/
                                       bootstrap.css
                                       bootstrap.min.css
                                     js/
                                       bootstrap.js

                                       bootstrap.min.js
                                     img/
                                       glyphicons-halflings.png
                                       glyphicons-halflings-white.png
maka akan seperti ini hasilnya:


2. Merancang html bootstrap

ini adalah rangka awal HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>Kereangka Awal</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
          <link href="assets/css/main.css" rel="stylesheet">>
  </head>
  <body>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

3. menyusun kerangka untuk widget

menggunakan span HTML file:
  <div class="row">
    <div class="span12">
          </div>
  </div>
                   <div class="row">
                             <div class="span8">
                             </div>  
                             <div class="span4">
                             </div>
                   </div>
                   <div class="row">
                             <div class="span4">
                             </div>
                             <div class="span4">
                             </div>
                             <div class="span4">
                             </div>
                   </div>
                   <div class="row">
                   <div class="span12">
                   </div>
                   </div>

maka akan seperti ini hasil gambarannya, tetapi ini tidak akan tampil apabila tidak ada widget nya


4. sekarang tinggal memasukkan perintah dan widget untuk website
untuk widget dan perintah nya bisa di buka di http://twitter.github.io/bootstrap/index.html:
cara upload file html ke hosting
untuk upload file ke hosting kali ini menggunakan hosting CPanel:
1. Pilih File Manager lalu klik Go
2. Pilih menu public html, lalu menu atas pilih upload untuk masuk ke direktori public html
3. pilih menu browse dan unggah semua file yang di perlukan untuk website
4. setelah proses upload selesai, anda tinggal test di browser dan pastikan semua berfungsi dengan baik



1 Comments


Ijin bookmark... Kalo sewaktu2 butuh tinggal baca lagi :)

Posting Komentar

Copyright © 2009 Diah Saraswati's BLOG All rights reserved. Theme by Laptop Geek. | Bloggerized by FalconHive.