Scribd
Upload
23 views21 pages

W11S01 Bootstrap

Uploaded by

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

W11S01 Bootstrap

Uploaded by

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

BOOTSTRAP

Pengembangan Situs Web I (PSW I)

Rini Juliana Sipahutar (RJS)


What is Bootstrap? 1

● Bootstrap is a free front-end framework for faster and easier web development
● Bootstrap 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
● Bootstrap also gives you the ability to easily create responsive designs.
Why Use Bootstrap? 2

Advantages of Bootstrap:
● Easy to use: Anybody with just basic knowledge of HTML and CSS can start
using Bootstrap
● Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
● Mobile-first approach: In Bootstrap 3, mobile-first styles are part of the core
framework
● Browser compatibility: Bootstrap is compatible with all modern browsers
(Chrome, Firefox, Internet Explorer, Edge, Safari, and Opera)
Bootstrap Versions 3

1 2 3 4 5

Early Bootstrap 3 Bootstrap 4 Bootstrap 5


Bootstrap 2
beginnings

Bootstrap, originally On January 31, 2012, On August 19, 2013, Mark Otto Bootstrap 5 was
named Twitter Bootstrap 2 was Bootstrap 3, was announced Bootstrap officially released on
Blueprint, at Twitter released. his version released. It redesigned 4 on October 29, May 5, 2021
as a framework to supports responsive components to use flat 2014. Bootstrap 4 was
encourage consistency web design design and a mobile finalized on January
across internal tools first approach. 18, 2018
Bootstrap Versions 5

● Bootstrap 5 is the newest version of Bootstrap; with new components, faster


stylesheets, more responsiveness etc.
● Bootstrap 5 supports the latest, stable releases of all major browsers and platforms.
However, Internet Explorer 11 and down is not supported.
● The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5
has switched to JavaScript instead of jQuery.
● Note: Bootstrap 3 and Bootstrap 4 is still supported by the team for critical
bugfixes and documentation changes, and it is perfectly safe to continue to use
them.
Where to Get Bootstrap? 6

Downloading Bootstrap Bootstrap CDN


If you want to download and host If you don't want to download and host
Bootstrap yourself, go to getbootstrap.com, Bootstrap yourself, you can include it from
and follow the instructions there. a CDN (Content Delivery Network).
File Structure 7

● When you download the zip


archive and uncompress it, the
basic file structure looks like the
picture.
● Besides compiled and minified
CSS and JS files, it also includes
fonts from Glyphicons, and the
optional starting Bootstrap
theme.
Bootstrap Templates and UI Components 8

● Bootstrap comes bundled with basic HTML and CSS design templates that include
many common UI components.
● These include: Typography, Tables, Forms, Buttons, Glyphicons, Dropdowns,
Buttons and Input Groups, Navigation, Pagination, Labels and Badges, Alerts,
Progress Bars, Modals, Tabs, Accordions, Carousels, and many others.
● These Bootstrap templates are made available as well-factored CSS classes that
you can apply to your HTML to achieve different effects.
Bootstrap Grid System 9

● This responsiveness of Bootstrap is achieved using a fluid Bootstrap grid system.


● Grids provide structure to the layout, defining the horizontal and vertical
guidelines for arranging content and enforcing margins.
● 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:
Grid Classes 10

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 larger desktops - screens equal to or greater than 1200px wide)
Grid System (Equal Columns) 11

Output:
Grid System (Unequal Columns) 12

Output:
Bootstrap Typography 13

● Bootstrap's global default font-size is 14px, with a line-height of 1.428.


● This is applied to the <body> element and all paragraphs (<p>).
● In addition, all <p> elements have a bottom margin that equals half their
computed line-height (10px by default).
● Besides these defaults, there are also customizable styles for standard HTML tags
that bring more consistency to the text, such as highlighted text (<mark>),
deleted text (<del> and <s>), underlined text (<u>), small text (<small>), and
bold text (<strong>).
● To get a full list, head to the Bootstrap Typography page.
Bootstrap Forms 14

● Bootstrap provides three types of form layouts:


○ Vertical form (this is default)
○ Horizontal form
○ Inline form
● Standard rules for all three form layouts:
○ Wrap labels and form controls in <div class="form-group"> (needed for
optimum spacing)
○ Add class .form-control to all textual <input>, <textarea>, and <select>
elements
Bootstrap Button 15

● Buttons are one of the things every browser renders totally differently.
● If you want to have consistent design across all browsers, this is potentially a big
problem. Luckily, Bootstrap has an elegant solution for buttons.
● Bootstrap provides different styles of buttons:

● To achieve the button styles above, Bootstrap has the following classes: .btn, .btn-
default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger, .btn-link
Bootstrap Button Group 16

● Bootstrap allows you to group a series of buttons together (on a single line) in a
button group:

● Use a <div> element with class .btn-group to create a button group:


Bootstrap Navigation Bar 17

● A navigation bar is a navigation header that is placed at the top of the page:

● With Bootstrap, a navigation bar can extend or collapse, depending on the screen
size.
● A standard navigation bar is created with <nav class="navbar navbar-default">.
Bootstrap Navigation Bar 18

● Inverted Navigation Bar: an alternative navigation bar, black navbar.

● Navigation Bar With Dropdown: hold dropdown menus.

● Right-Aligned Navigation Bar: used to right-align navigation bar buttons.

● Navbar Button: to add buttons inside the navbar


Bootstrap Navigation Bar 19

● Navbar Text: to vertical align any elements inside the navbar that are not links.

● Fixed Navigation Bar: can also be fixed at the top or at the bottom of the page.

● Collapsing The Navigation Bar: hide the navigation bar; and only show it when
it is needed.

● Navbar Forms: to add form elements inside the navbar


References 20

● Bootstrap 3 Tutorial: https://www.w3schools.com/bootstrap/default.asp


● Bootstrap 4 Tutorial: https://www.w3schools.com/bootstrap4/default.asp
● Bootstrap 5 Tutorial: https://www.w3schools.com/bootstrap5/index.php
● What is Bootstrap? A Short Bootstrap Tutorial on the What, Why, and How:
https://www.toptal.com/front-end/what-is-bootstrap-a-short-tutorial-on-the-what-
why-and-how
● Bootstrap Tutorial: https://www.javatpoint.com/bootstrap-tutorial
THANK YOU

Credits: Slidesgo

You might also like