Scribd
Upload
13 views55 pages

Slot4,5 Bootstrap

Uploaded by

hungptfpt2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views55 pages

Slot4,5 Bootstrap

Uploaded by

hungptfpt2004
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 55

Introduction to Bootstrap Layout và

JavaScript Components
Objectives
◆ Identify the purpose of using front-end UI frameworks in web design and
development
◆ Set up and Configure project with Bootstrap
◆ Use the Bootstrap grid system to design responsive websites
◆ Recognize how the JavaScript components provide dynamic behavior
◆ Create various navigational elements using Tabs and Accordion
◆ Create modals, tooltips and popovers to reveal content in your website
◆ Build a carousel to show dynamic content on your website
Front-End Web UI Frameworks
What are front-end UI frameworks?

◆ Collection of ready-to-use HTML, CSS and JavaScript


templates for UI components:
▪ Typography, Forms, Buttons, Tables, Navigations, Dropdowns, Alerts,
Modals, Tabs, Accordion, Carousel etc.
Popular front-end UI frameworks

1. Bootstrap 6. Pure

2. Semantic-UI 7. Skeleton

3. Foundation 8. UIKit

4. Materialize 9. Milligram

5. Material UI 10.Susy
Why Front-End Web UI Frameworks?

◆ Responsive web design


▪ Mobile first

◆ Cross-browser compatibility
▪ Dealing with quirks of browsers

◆ Increased productivity
▪ Easy to get started

◆ Community support
▪ Resources and web page templates
Introduction to Bootstrap
Bootstrap Overview

◆ Bootstrap is the most popular HTML, CSS, and JS framework for


developing responsive, mobile first projects on the web
From the Bootstrap webpage

◆ Front-end framework for faster and easier web development


◆ Includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many
other, as well as optional JavaScript plugins
◆ Easily create responsive designs with mobile first approach
Bootstrap History

◆ First released in 2011


▪ Mark Otto and Jacob Thornton

◆ Current Production Version 5.3

◆ The first comprehensive framework


▪ Gained popularity very quickly
Bootstrap files
Viewport

◆ <meta name="viewport" content="width=device-width, initial-


scale=1">
◆ The viewport meta tag:
• Ensures that the screen width is set to the device width and the content is
rendered with this width in mind
• Designing the websites to be responsive to the size of the viewport
• Bootstrap grid system

▪ https://getbootstrap.com/docs/5.3/layout/grid/
Using BootStrap by CDN
1. Create a new index.html file in your project root.

2. Include Bootstrap’s CSS and JS


• CDN links: Place the <link> tag in the <head> for our CSS, and the <script> tag for our JavaScript bundle
• <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
• <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
• Including Popper for positioning dropdowns, poppers, and tooltips
• <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
• <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>

https://getbootstrap.com/docs/5.3/getting-started/introduction/
Using BootStrap by Terminal
1. Create a folder to hold the files.
2. Initialize a new npm project:
Run the command "npm init -y" to initialize.

3. Install Bootstrap package.

4. Create an HTML file: index.html


5. Inside the index.html file, add the following code to include the Bootstrap
CSS and JavaScript files
6. Start a local development server to view your project:
npx lite-server
Exercise 5: Getting Started
with Bootstrap
Bootstrap Grid

◆ Designed to be:
▪ Responsive
▪ Mobile first
▪ Fluid
CSS Flexbox Layout

◆ Simpler and flexible layout options in CSS


◆ Can easily handle dynamic/unknown size of content containers
◆ Direction-agnostic layout
Why Flexbox for Bootstrap?

◆ Easy vertical alignment of content within a parent element


◆ Easy reordering of content across devices and screen
resolutions with the help of media queries
◆ Easy CSS-only equal height columns for your grid-based
layouts
Bootstrap Container
• Bootstrap comes with three different containers:
• .container, which sets a max-width at each responsive breakpoint
• .container-{breakpoint}, which is width: 100% until the specified breakpoint
• .container-fluid, which is width: 100% at all breakpoints
Boostrap Grid
Bootstrap Grid

• Bootstrap’s grid system can adapt across all six default


breakpoints, and any breakpoints you customize. The six
default grid tiers are as follows:
• Extra small (xs)
• Small (sm)
• Medium (md)
• Large (lg)
• Extra large (xl)
• Extra extra large (xxl)
Auto-layout columns

Equal-width
Add any number of unit-less
classes for each breakpoint

Setting one column


width
Auto-layout for flexbox grid
columns

Variable width content


Use col-{breakpoint}-auto
classes to size columns
based on the natural

https://getbootstrap.com/docs/5.3/layout/grid/#auto-layout-columns
Responsive classes

All breakpoints
use the .col and .col-*
classes

Stacked to horizontal
Using a single set of .col-sm-*
classes

https://getbootstrap.com/docs/5.3/layout/grid/#responsive-classes
Responsive classes – cont’d

Mix and match


Use a combination of
different classes for each
tier as needed

Row columns
Use the responsive .row-
cols-*

https://getbootstrap.com/docs/5.3/layout/grid/#responsive-classes
Nesting column

• To nest content with the default grid, add a new .row and set of .col-sm-*
columns within an existing .col-sm-* column.
Bootstrap Column
Flexbox Alignment

Vertical alignment
Change the vertical alignment with any of
the responsive align-items-* classes

Horizontal alignment
Change the horizontal alignment with any of the
responsive justify-content-* classes.
Flexbox Alignment – cont’d

Column wrapping
If more than 12 columns are placed within a single
row, each group of extra columns will, as one unit,
wrap onto a new line

Column breaks
Breaking columns to a new line in flexbox requires a
small hack: add an element with width: 100%
wherever you want to wrap your columns to a new
line
Reordering

Order classes
• Use .order- classes for
controlling the visual order of
your content. These classes
are responsive, so you can set
the order by breakpoint
(e.g., .order-1.order-md-2).
Reordering – cont’d

Offset classes
• Move columns to the right using .offset-md-* classes. These
classes increase the left margin of a column by * columns.
Reordering – cont’d

Margin utilities
• With the move to flexbox in v4, you can use margin utilities
like .me-auto to force sibling columns away from one another.
Exercise 6: Build website
layout using Bootstrap Grid
Bootstrap JavaScript
Components
Bootstrap and JavaScript

• Bootstrap’s JavaScript support is through JS Plugins


• Plugins written based on Jquery

• Plugins can be individually included


Bootstrap JS Components

• JS components can all be used without writing a single line of


JavaScript:
• data-* attributes (e.g., data-toggle, data-spy)

• Straightforward approach to use plugins

• We will explore this approach in this module

• Full JS API available if needed


• Need to know JQuery syntax and JavaScript
Collapse and Accordion
• Collapse: Toggle the visibility of content across your project with a few
classes and our JavaScript plugins.

• Accordion: Build vertically collapsing accordions in combination with our


Collapse JavaScript plugin.
Tooltips, Popovers and Modals

• Revealing content upon interacting with an element on the


web page
• Information displayed as an overlay
• Order of flexibility:
• Tooltip  Popover  Modal
• Modal:
• More detailed information can be presented than tooltips and
popovers.
• Modal contains header, body and footer.
• Can use the Bootstrap grid in the body to organize content.
Tooltips

• Custom tooltips

• Directions

https://getbootstrap.com/docs/5.3/components/tooltips/
Popovers

• Popovers are opt-in for performance reasons, so you must initialize them
yourself.
• Zero-length title and content values will never show a popover.

<button type="button" class="btn btn-lg btn-danger" data-bs-


toggle="popover" data-bs-title="Popover title" data-bs-content="And
here's some amazing content. It's very engaging. Right?">
Click to toggle popover
</button>

https://getbootstrap.com/docs/5.3/components/popovers/
Modals
• 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.

https://getbootstrap.com/docs/5.3/components/modal/
Navbar, Navs & Tabs

• Navbar:
• A common UI component used to create a navigation menu at the top of a
webpage.
• Navs (Navigation):
• Navigation elements used to create a set of links or navigation items within a
webpage. They can be horizontal or vertical and are often placed within a Navbar
or a sidebar.
• Tabs:
• Another type of navigation component that allows users to switch between different
sections or views within a webpage, typically without having to navigate to a new
page. Tabs are often displayed horizontally and consist of clickable labels or tabs
that correspond to different content panels.
Navbar

• Navbars are responsive by default, but you can easily modify


them to change that. Responsive behavior depends on our
Collapse JavaScript plugin.

https://getbootstrap.com/docs/5.3/components/navbar/
Navs & Tabs

• Navigation available in Bootstrap share general markup and


styles, from the base .nav class to the active and disabled
states. Swap modifier classes to switch between each style.

https://getbootstrap.com/docs/5.3/components/navs-tabs/
Carousel

• The carousel is a slideshow for cycling through a series of content,


built with CSS 3D transforms and a bit of JavaScript. It works with a
series of images, text, or custom markup. It also includes support for
previous/next controls and indicators.

• Carousels must be manually initialized using the carousel


constructor method. Without initialization, some of the event listeners
(specifically, the events needed touch/swipe support) will not be
registered until a user has explicitly activated a control or indicator.
Carousel – cont’d

https://getbootstrap.com/docs/5.3/components/carousel/
Cards

• A card is a flexible and extensible content container. It


includes options for headers and footers, a wide variety of
content, contextual background colors, and powerful display
options. If you’re familiar with Bootstrap 3, cards replace our
old panels, wells, and thumbnails. Similar functionality to those
components is available as modifier classes for cards.
Cards – cont’d

https://getbootstrap.com/docs/5.3/components/card/
Exercise 7: Demo about Cards Column
Bootstrap Forms
Bootstrap ‘s form controls
• Bootstrap’s form controls expand on our Rebooted form styles with classes. Use these
classes to opt into their customized displays for a more consistent rendering across
browsers and devices.

https://getbootstrap.com/docs/5.3/forms/overview/
Exercise 8: Demo about Form Controls
Lab 2: Build the website
interface
Summary
◆ Concepts were introduced:
◆ Identify the purpose of using front-end UI frameworks in web design and development
◆ Set up and Configure project with Bootstrap
◆ Use the Bootstrap grid system to design responsive websites
◆ Recognize how the JavaScript components provide dynamic behavior
◆ Create various navigational elements using Tabs and Accordion
◆ Create modals, tooltips and popovers to reveal content in your website
◆ Build a carousel to show dynamic content on your website

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy