Lecture-11.pptx
Download as PPTX, PDF0 likes15 views
The document discusses various table classes in Bootstrap that can be used to style tables. It explains basic table styling with the .table class which adds light padding and horizontal dividers. Other classes like .table-striped add zebra stripes, .table-bordered adds borders, .table-hover adds hover effects, and .table-condensed makes tables more compact. Contextual classes like .success can be used to color table rows and cells.
Lecture-11.pptx
- 1. Table classes in Boot starp
- 2. Basic Table A basic Bootstrap table has a light padding and only horizontal dividers. The .table class adds basic styling to a table:
- 3. <div class="container"> <h2>Basic Table</h2> <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Ram</td> <td>sing</td> <td>ram@gmail.com</td> </tr> <tr> <td>Krishan</td> <td>kumar</td> <td>kr@gmail.com</td> </tr> <tr> <td>Roshan</td> <td>kumar</td> <td>rosh@gmail.com</td> </tr> </tbody> </table> </div> the .table class adds basic styling (light padding and only horizontal dividers) to a table:
- 4. Striped Rows The .table-striped class adds zebra-stripes to a table: <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table>
- 5. Bordered Table The .table-bordered class adds borders on all sides of the table and cells: <table class="table table-bordered"> The .table-bordered class adds borders to a table:
- 6. Hover Rows The .table-hover class adds a hover effect (grey background color) on table rows: <p>The .table-hover class enables a hover state on table rows:</p> <table class="table table- hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> Condensed Table The .table-condensed class makes a table more compact by cutting cell padding in half: <table class="table table- condensed"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead>
- 7. Contextual Classes Contextual classes can be used to color table rows (<tr>) or table cells (<td>): Contextual classes can be used to color table rows or table cells. The classes that can be used are: .active, .success, .info, .warning, and .danger. <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Defaultson</td> <td>def@somemail.com</td> </tr> <tr class="success"> <td>Success</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr class="danger"> <td>Danger</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr class="info"> <td>Info</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr class="warning">
- 8. Bootstrap CSS Classes Many CSS frameworks make heavy use of CSS classes. For instance, Bootstrap CSS uses classes to define page elements. Let’s see an example of how Bootstrap uses CSS classes. In Bootstrap CSS, the CSS class .btn can be used with the <button> HTML element (as well as the <a> and <input> elements). Bootstrap contains CSS that automatically formats any elements defined with the .btn class a certain way. Therefore, simply adding the attribute class=“btn” to an element changes its appearance. <button class="btn">Click Me</button><br> <button class="btn btn-success">Click Me</button><br> <button class="btn btn-danger">Click Me</button><br> With CSS classes, Bootstrap lets us quickly style page elements by just adding one or more class names. CSS classes enable you to format different types of elements while writing less code. Text .font-italic .font-weight-bold .font-weight-bolder .font-weight-light .font-weight-lighter
- 9. font and feature selection Text Documentation and examples for common text utilities to control alignment, wrapping, weight, and more. Text alignment <p class="text-start">Start aligned text on all viewport sizes.</p> <p class="text-center">Center aligned text on all viewport sizes.</p> <p class="text-end">End aligned text on all viewport sizes.</p> <p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider. </p> <p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p> <p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p> <p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p> Text wrapping and overflow Wrap text with a .text- wrap class. <div class="badge bg-primary text-wrap" style="width: 6rem;"> This text should wrap. </div> Prevent text from wrapping with a .text-nowrap class. <div class="text-nowrap bd-highlight" style="width: 8rem;"> This text should overflow the parent. </div>
- 10. Text transform <p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased text.</p> <p class="text-capitalize">CapiTaliZed text.</p> Font size <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class="fs-3">.fs-3 text</p> <p class="fs-4">.fs-4 text</p> <p class="fs-5">.fs-5 text</p> <p class="fs-6">.fs-6 text</p> Font weight and italics <p class="fw-bold">Bold text.</p> <p class="fw-bolder">Bolder weight text (relative to the parent element).</p> <p class="fw-normal">Normal weight text.</p> <p class="fw-light">Light weight text.</p> <p class="fw-lighter">Lighter weight text (relative to the parent element).</p> <p class="fst-italic">Italic text.</p> <p class="fst-normal">Text with normal font style</p>
- 11. Boot Strap Modal Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. Bootstrap Modals offer a lightweight, multi- purpose JavaScript popup that’s customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap-based websites can use Bootstrap modals to showcase, for example, terms and conditions (as part of a signup process), videos (similar to a standard light box), or even social media widgets. Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences. Modals use position: fixed, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You’ll likely run into issues when nesting a .modal within another fixed element. Once again, due to position: fixed, there are some caveats with using modals on mobile devices. Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
- 12. <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data- target="#myModal"> Open modal </button> <button type="button" class="btn">Basic</button> <button type="button" class="btn btn- default">Default</button> <button type="button" class="btn btn- primary">Primary</button> <button type="button" class="btn btn- success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn- warning">Warning</button> <button type="button" class="btn btn- danger">Danger</button> <button type="button" class="btn btn-link">Link</button> data-toggle and data-target. The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open. So whenever a link like that is clicked, a modal with an ID of “basic Modal” will appear.
- 13. <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> The .fade class adds a transition effect which fades the modal in and out. the .modal-sm class in Bootstrap to set small modal with less width. modal-content class defines the modal content Modal content can be any HTML element (divs, headings, paragraphs, images, etc.). <!-- Fading modal --> <div class="modal fade"></div> <!-- Modal without animation --> <div class="modal"></div> Modal Size Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals. Add the size class to the <div> element with class .modal-dialog:
- 14. Scrolling Modal When you have a lot of content inside the modal, a scrollbar is added to the page. See the examples below to understand it: <div class="modal-dialog"> However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog- scrollable to .modal-dialog: <div class="modal-dialog modal-dialog-scrollable">
- 15. <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> The .modal-header class is used to define the style for the header of the modal. .modal-title class in Bootstrap to set the title of a modal <div class="bg-primary"></div> <div class="bg-secondary"></div> <div class="bg-success"></div> <div class="bg-danger"></div> <div class="bg-warning"></div> <div class="bg-info"></div> <div class="bg-light"></div> <div class="bg-dark"></div>
- 16. <!-- Modal body --> <div class="modal-body"> Modal body.. </div> The .modal-body class is used to define the style for the body of the modal. <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button> </div> A modal footer is used to customize the default footer of a modal dialog.
- 17. <body> <div class="container"> <h2>Small Modal</h2> <!-- Button to Open the Modal --> <button type="button" class="btn btn- primary" data-toggle="modal" data- target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn- secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </body> </html>