Scribd
Unggah
5 tayangan

4 ASP - NET Module - HTML Framework - Bootstrap

ASP.NET MODUL HTML

Diunggah oleh

indobaiksan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
5 tayangan

4 ASP - NET Module - HTML Framework - Bootstrap

ASP.NET MODUL HTML

Diunggah oleh

indobaiksan
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 9

BAB 4

Html Framework: Bootstrap


Setelah kita belajar tentang membuat page sebelum belajar ke tahap selanjutnya kita
harus tau tentang tag html dan cara penggunaanya. Untuk membuat design yang menarik
maka kita lebih baik menggunakan framework yang sudah ada. Pada asp.net core sudah
diinclude kan framework untuk membuat design yang mudah yaitu menggunakan
bootstrap.

Bootstrap adalah kerangka kerja CSS yang sumber terbuka dan bebas untuk merancang
situs web dan aplikasi web. Kerangka kerja ini berisi templat desain berbasis HTML dan
CSS untuk tipografi, formulir, tombol, navigasi, dan komponen antarmuka lainnya, serta
juga ekstensi opsional JavaScript. Bootstrap hanya focus pada pengembangan front-end
development yang artinya pengembangan antar muka pengguna sehingga menjadi user
friendly.

Page | 1
Secara default ketika kita membuat project web apps maka kita diarahkan menggunakan
bootstrap versi 4

Jadi yang akan kita pelajari adalah penggunaan bootstrap 4.

Cara menggunakan boostrap adalah dengan menambahkan reference pada halaman


yang akan kita implement bootrstrap

Reference yang wajib ada pada halaman web ketika menggunakan bootstrap adalah

Meta viewport digunakan agar tampilan bootstrap mengikuti besar kecilnya halaman
pada device user, Sedangkan link rel digunakan untuk menyisipkan file css bootstrap
kedalam halaman html

Kita akan belajar membuat halaman html menggunakan bootstrap. Yang perlu kita tau
bahwa bootstrap bekerja dengan grid dan jumlah gridnya adalah 12.

Bootstrap memiliki beberapa jenis column grid

Page | 2
Berikut adalah aturan column pada bootstrap, yang sering digunakan adalah col-md.

Page | 3
Try:

1. Buka visual code

2. Buka project jika belum terbuka filenya

3. Tambahkan file html dengan nama latihanbootstrap.cshtml dengan cara klik kanan
pada pages dan pilih new files

Page | 4
Isi denga nama latihanbootstrap.cshtml

4. Buka file latihanbootstrap.cshtml dan tambahkan code berikut

Kita menghilangkan default layout yang ada, sehingga kita dapat membuat layout
sesuai kebutuhkan kita
5. Tambahkan code berikut pada file latihanbootstrap.cshtml pada baris ke 5

Page | 5
6. Running project dengan cara buka terminal dan tulis dotnet run

7. Buka halaman web dengan megetikan pada url


https://localhost:5001/latihanbootstrap
Hasilnya akan seperti ini ketika layar web maximize

Page | 6
Namun ketika layar dikecilkan maka akan tampil seperti ini otomatis menyesuaikan
dengan layar

8. Ubah halaman latihanbootstrap.cshtml dan isi codenya dengan code seperti ini
untuk merubah tampilan bootstrap yang lain.

Page | 7
9. Running project dan lihat hasilnya akan seperti ini

Page | 8
10. Ubah halaman latihanbootstrap.cshtml dan isi codenya dengan code seperti ini
untuk merubah tampilan bootstrap yang lain.

Pada halaman ini terdapat style yang diletakkan pada body. Artinya adalah kita
dapat meletakkan script css disembarang tempat selama berada ditag style.
11. Running project maka hasilnya akan seperti ini

Page | 9

Anda mungkin juga menyukai