Membuat tampilan website responsiif  dengan Bootstrap 4

Membuat tampilan website responsiif dengan Bootstrap 4

loading....

Membuat tampilan web yang responsif dengan bootstrap 4 itu tidak sulit. Menurut rumah code inti dari pembuatan website yang responsif itu di bagi 3 bagian haeder isi dan footer. Kamu cukup mengikuti langkah langkah ini untuk membuat tampilan web yang responsif.

Langkah Pembuatan web responsif dengan Bootstrap 4

  1. Buatlah kerangka web nya terlebh dahulu lihat gambar di bawahContoh Kerangka web Respondif
  2. Mari kita buat kerangka web sperti kerangka di atas lalu mari kita buat kerangka tampilan utama nya
    <html>
    <head>
        <title>Rumah Code</title>
        
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    
    <body>
    <!--Header -->
        <div class="row p-2">
    		<div class="col-md-12 border p-3">
    			header
    		</div>
        </div>
    <!--Body -->
        <div class="row p-2">
    		<div class="col-md-12 border p-3 ">
    			Body
    		</div>
        </div>
    <!--Footer -->	
        <div class="row  p-2">
    		<div class="col-md-12 border p-3 ">
    			Footer
    		</div>
        </div>
      <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script defer src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </body>
    </html>​

    Source code di atas menjadkan tampilan seperti di bawah ini

    header
    Body
    Footer
    di dalam class row saya menambah kan class border dan p-2 untuk memberikan efek css border dan padding
  3. setelah itu tinggal menambahkan ukuran tinggi dan elemen lain nya
  4. Sekarang saya akan memodifikasi bagian body untuk bagian body menjadi 2 colom merubah lebar bagian colom setalah itu menjadikannya bagian body menjadi tampil di tengah
        <div class="row p-2">
    		<div class="col-md-9 mx-auto border">
    			<div class="row">
    				<div class="col-md-9 mx-auto border">
    					Body Kiri
    				</div>
    				<div class="col-md-3 mx-auto border">
    					Body Kanan
    				</div>
    			</div>
    		</div>
        </div>​
    contoh kode html di atas akan memberikan tampilan seperti di bawah
    Body Kiri
    Body Kanan
    Pada Col pertama saya merubah col-md-12 menjadi col-md-9 hal ini bertujuan agar tampilan body menjadi tidak maximal. Sedangkan untuk membuat colom menjadi di tengah menggunakan class mx-auto. Untuk body kiri dan body kanan saya menggunakan class col-md-9 dan col-md-3 hal ini bertujuan untuk memberikan ukuran pada colom dengan ukuran yang berbeda. Jika ingin ukuran yang sama pada col kiri dan kana kamu cukup menggunakan class col-md-6.

Demikian lah tutorial dasar untuk membuat tampilan web responsif yang sederhana. Silahkan kawan wan kembangkan sendiri untuk membuat tampilan yang lebih baik.

Artikel Menarik Lainnya
Bootstrap, Bootstrap 4

loading...