Lecture-10.pptx
Download as PPTX, PDF0 likes29 views
The Bootstrap grid system allows dividing the page into a maximum of 12 columns. Columns can be grouped together or span multiple columns. It is responsive and rearranges based on screen size. There are classes for extra small, small, medium, and large screens. To create a grid, add divs with the appropriate col-*-* classes within a row div. This allows creating layouts with equal or unequal width columns.
Lecture-10.pptx
- 2. Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 4 span 4 span 4 span 4 span 8 span 6 span 6 span 12 Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
- 3. Grid Classes The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) The classes above can be combined to create more dynamic and flexible layouts.
- 4. Basic Structure of a Bootstrap Grid The following is a basic structure of a Bootstrap grid: <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div> First; create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate .col-*-* classes). Note that numbers in .col- *-* should always add up to 12 for each row.
- 5. Three Equal Columns <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div>
- 6. Two Unequal Columns <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>
- 7. Navbar The navbar is one of the prominent features of Bootstrap sites. Navbars are responsive 'meta' components that serve as navigation headers for your application or site. Navbars collapse in mobile views and become horizontal as the available viewport width increases. At its core, the navbar includes styling for site names and basic navigation.
- 8. To create a default navbar Add the classes .navbar, .navbar-default to the <nav> tag. Add role = "navigation" to the above element, to help with accessibility. Add a header class .navbar-header to the <div> element. Include an <a> element with class navbar-brand. This will give the text a slightly larger size. To add links to the navbar, simply add an unordered list with the classes of .nav, .navbar-nav.
- 9. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar- brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>
- 11. Inverted Navigation Bar If you don't like the style of the default navigation bar, Bootstrap provides an alternative, black navbar: Just change the .navbar-default class into .navbar-inverse: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>
- 13. Navigation Bar With Dropdown Navigation bars can also hold dropdown menus. The following example adds a dropdown menu for the "Page 1" button: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Page 1-1</a></li> <li><a href="#">Page 1-2</a></li> <li><a href="#">Page 1-3</a></li> </ul> </li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> </nav>
- 14. Right-Aligned Navigation Bar The .navbar-right class is used to right-align navigation bar buttons. In the following example we insert a "Sign Up" button and a "Login" button to the right in the navigation bar. We also add a glyphicon on each of the two new buttons: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> <li><a href="#"><span class="glyphicon glyphicon-log- in"></span> Login</a></li> </ul> </div> </nav>