HTML5 – Bootstrap
Bootstrap is a front-end framework that provides a range of pre-styled and responsive UI components for building modern and responsive websites. Some of the key features of Bootstrap include:
- Grid system: Bootstrap provides a responsive grid system that allows you to create layouts that adapt to different screen sizes.
- UI components: Bootstrap provides a range of UI components such as buttons, forms, navbars, and modals that are pre-styled and responsive.
- Responsive design: Bootstrap is built with responsive design in mind, and the UI components are designed to adapt to different screen sizes.
Here is an example of how to use Bootstrap to create a simple navbar:
<code><nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav</code>">
<code> </code><li class="nav-item active"> <a class="nav-link" href="#">Home</a> </li>
<code> </code><li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
<code> </code><li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li>
<code> </code></ul>
<code><code> </code></code></div>
</nav>
In this example, the navbar
class is used to create a navbar, and the navbar-expand-lg
class is used to create a responsive navbar that collapses on small screens. The navbar-light
and bg-light
classes are used to style the navbar. The navbar-brand
class is used to create the brand logo, and the navbar-toggler
class is used to create the toggle button for the navbar on small screens. The collapse navbar-collapse
class is used to create the navbar menu, and the navbar-nav
class is used to style the navbar menu.