0% menganggap dokumen ini bermanfaat (0 suara)
4 tayangan9 halaman

Panduan Penggunaan Bootstrap 4

ASP.NET MODUL HTML

Diunggah oleh

indobaiksan
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
4 tayangan9 halaman

Panduan Penggunaan Bootstrap 4

ASP.NET MODUL HTML

Diunggah oleh

indobaiksan
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

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 [Link] 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 [Link] dengan cara klik kanan
pada pages dan pilih new files

Page | 4
Isi denga nama [Link]

4. Buka file [Link] dan tambahkan code berikut

Kita menghilangkan default layout yang ada, sehingga kita dapat membuat layout
sesuai kebutuhkan kita
5. Tambahkan code berikut pada file [Link] 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


[Link]
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 [Link] 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 [Link] 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

Common questions

Didukung oleh AI

Utilizing optional JavaScript extensions in Bootstrap enhances interactivity and user experience by providing features such as modals, carousels, and collapsible menus. These extensions allow developers to add dynamic functionalities without manually writing complex JavaScript code, speeding up development time. However, they also require additional resources which can impact loading times and performance, necessitating careful resource optimization .

Removing default layouts in ASP.NET Core when using Bootstrap allows for greater flexibility and customization of web page designs. By building layouts from scratch, developers can tailor every aspect of the page to fit specific project requirements, while still leveraging Bootstrap's responsive grid and component styles. This customization circumvents the confines of preset structures provided by default ASP.NET templates, resulting in potentially more efficient, targeted, and unique design solutions .

In Bootstrap, 'user-friendly design' refers to its ability to create intuitive, accessible, and responsive UI elements effortlessly. Bootstrap’s predefined classes, components, and responsive grid system enable designers to craft layouts that adapt seamlessly to any device, enhancing the user’s interaction experience. This is crucial in offering consistency and accessibility, reducing the cognitive load and making navigation straightforward across diverse screen sizes .

In an ASP.NET Core web project, to use Bootstrap's different styles, you can modify the HTML and CSS code within the '.cshtml' file. This involves updating class names and employing Bootstrap's utility classes to alter the layout and appearance. Modifications might include changing grid layouts or inserting Bootstrap's components. The use of in-line CSS or within style tags allows further customization of styles within the Bootstrap framework .

Bootstrap is an open-source CSS framework used for designing websites and web applications. It provides HTML and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, with optional JavaScript extensions. In ASP.NET Core projects, Bootstrap simplifies the process of creating user-friendly front-end designs. It allows developers to focus on responsive, aesthetically pleasing UIs without delving deeply into custom styling, as these are handled by Bootstrap's built-in classes and grid system .

After modifying the code for an ASP.NET Core project using Bootstrap, the steps to run and view the project include opening a terminal, executing the 'dotnet run' command to start the application, and then accessing the web page by entering the appropriate URL (e.g., 'https://localhost:5001/latihanbootstrap'). This process ensures that all changes are compiled and the application is hosted locally for testing .

Bootstrap 4's grid system facilitates responsive web design by using a flexible, 12-column grid layout that enables developers to construct responsive layouts that automatically adjust to the size of the viewing device. The most commonly used class, 'col-md', allows for defining how the interface adjusts at medium breakpoints and above, ensuring that layout remains consistent and accessible across different screen sizes without the need for separate code bases for different devices .

Using the "col-md" class in Bootstrap grids impacts the layout by determining how columns are structured at medium screen sizes and larger. This class specifies the width a column should occupy, thus allowing more control over how multiple columns are displayed side-by-side or stacked. Adjustments made using 'col-md' enable developers to have a responsive design that realigns components efficiently from tablets to desktops without additional configuration .

Directly modifying layouts and styles in the "latihanbootstrap.cshtml" file is beneficial when quick, project-specific design adjustments are needed. It allows developers to instantly test changes and iterate designs rapidly during development phases. This approach is useful when experimenting with various styles or integrating immediate requirements from design plans, reducing the turnaround time for UI updates .

To integrate Bootstrap into an ASP.NET Core web page, you need to add references to the Bootstrap CSS files. This involves adding a 'meta viewport' tag to adjust layout according to device size, and a 'link rel' tag to include the Bootstrap CSS files into the HTML page. Additionally, you may need to modify the default page layout to accommodate Bootstrap's styling and possibly include JavaScript for additional functionalities .

Anda mungkin juga menyukai