Bootstrap SLIDES for web development course
dreamy678
80 views
57 slides
Oct 13, 2024
Slide 1 of 57
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
About This Presentation
BOOTSTRAP
Slide Content
What is Responsive Web Design? Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops. Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Bootstrap is completely free to download and use! 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, Safari, and Opera)
What is Bootstrap? 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 Bootstrap is famous for being developed with components that have the ability to follow the property of responsive designs Responsive Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen Responsive Design allow your page works for computer, tablets and mobile phones.
What is Bootstrap? In other words, bootstrap is a collection of CSS classes and JavaScript functions the you get ready to use and will not worry about write code like this:
First Bootstrap Page You will need to include three files: bootstrap.min.css jquery.min.js bootstrap.min.js You must download it and include in you page For this example, we include from the Internet
Where to Get Bootstrap? There are two ways to start using Bootstrap on your own web site. Download Bootstrap from getbootstrap.com If you want to download and host Bootstrap yourself, go to getbootstrap.com , and follow the instructions there. Include Bootstrap from a CDN If you don't want to download and host Bootstrap yourself, you can include it from a CDN (Content Delivery Network). MaxCDN provides CDN support for Bootstrap's CSS and JavaScript. You must also include jQuery.
Bootstrap CDN You must include the following Bootstrap’s CSS, JavaScript, and jQuery from MaxCDN into your web page. <!-- Latest compiled and minified Bootstrap CSS --> <link rel =" stylesheet"href ="https://cdn.jsdelivr.net/ npm /[email protected]/ dist / css /bootstrap.min.css"> <!-- Latest compiled Bootstrap JavaScript --> <script src ="https://cdn.jsdelivr.net/ npm /[email protected]/ dist / js /bootstrap.min.js"></script> <!-- latest jQuery library --> <script src ="https://code.jquery.com/jquery-latest.js"></script>
First Bootstrap Page Include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set
First Bootstrap Page Meta viewport tag ensure proper rendering and touch zooming Width of the page to follow the screen-width of the device and initial zoom level to default zoom level of device User will have a better experience, thus will not need zoom the page to view page information
Create Web Page with Bootstrap Bootstrap is mobile-first Bootstrap 3 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element: <meta name="viewport" content="width=device-width, initial-scale=1"> The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
First Bootstrap Page Bootstrap has a concept of containing element to wrap site contents
Containers Containers Bootstrap also requires a containing element to wrap site contents. There are two container classes to choose from: The .container class provides a responsive fixed width container. The .container-fluid class provides a full width container , spanning the entire width of the viewport. Note: Containers are not nestable (you cannot put a container inside another container).
Bootstrap Grids Bootstrap's grid system allows up to 12 columns across the page You can divide the container in rows and each row in columns with space multiple of the 12
The Bootstrap grid system has four classes: xs / sm (for phones) md (for tablets) lg (for desktops) xl (for larger desktops) The classes above can be combined to create more dynamic and flexible layouts.
// Extra small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } // Small devices (landscape phones, 576px and up) @media (min-width: 576px) and (max-width: 767.98px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) and (max-width: 991.98px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) and (max-width: 1199.98px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }
Bootstrap Grids In the bellow example, we divide the space inside the container in 1 row and this row in 3 columns with the same side. 4+4+4 = 12 You can use any combination that the sum be equal to 12.
Bootstrap Grids 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: <div class="col-md-12">Span 12 columns</div> <div class="col-md-6">Span 6</div><div class="col-md-6">Span 6</div> <div class="col-md-4">Span 4</div><div class="col-md-8">Span 8</div> <div class="col-md-4">Span 4</div><div class="col-md-4">Span 4</div> <div class="col-md-4">Span 4</div> Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
<div class="row"> <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.
Bootstrap Grids Responsive Bootstrap's grid system with 3 columns small screens big screens
Spacing Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm , md , lg , and xl . Where property is one of: m - for classes that set margin p - for classes that set padding Where sides is one of: t - for classes that set margin-top or padding-top b - for classes that set margin-bottom or padding-bottom l - for classes that set margin-left or padding-left r - for classes that set margin-right or padding-right x - for classes that set both *-left and *-right y - for classes that set both *-top and *-bottom
Spacing - Continued blank - for classes that set a margin or padding on all 4 sides of the element Where size is one of: - for classes that eliminate the margin or padding by setting it to 1 - (by default) for classes that set the margin or padding to $spacer * .25 2 - (by default) for classes that set the margin or padding to $spacer * .5 3 - (by default) for classes that set the margin or padding to $spacer 4 - (by default) for classes that set the margin or padding to $spacer * 1.5 5 - (by default) for classes that set the margin or padding to $spacer * 3 auto - for classes that set the margin to auto (You can add more sizes by adding entries to the $spacers Sass map variable.)
Sizing Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
Sizing Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
Border Reference: https ://getbootstrap.com/docs/4.0/utilities/borders/
Border-color . Reference: https ://getbootstrap.com/docs/4.0/utilities/borders/
Border-radius . Reference: https ://getbootstrap.com/docs/4.0/utilities/borders/
Flex Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties. e.g . . d-flex .d-inline-flex Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row . However, you may encounter situations where you needed to explicitly set this value (like responsive layouts). Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side. Direction
Typography Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more Headings <p class= "h1" > h1. Bootstrap heading </p> <p class= "h2" > h2. Bootstrap heading </p> <p class= "h3" > h3. Bootstrap heading </p> <p class= "h4" > h4. Bootstrap heading </p> <p class= "h5" > h5. Bootstrap heading </p> <p class= "h6" > h6. Bootstrap heading </p> Output
Inline Text Elements Output <p> You can use the mark tag to <mark> highlight </mark> text. </p> <p><del> This line of text is meant to be treated as deleted text. </del></p> <p><s> This line of text is meant to be treated as no longer accurate. </s></p> <p><ins> This line of text is meant to be treated as an addition to the document. </ins></p> <p><u> This line of text will render as underlined </u></p> <p><small> This line of text is meant to be treated as fine print. </small></p> <p><strong> This line rendered as bold text. </strong></p> <p>< em > This line rendered as italicized text. </ em ></p>
Lists u nstyled < ul class= "list-inline" > <li class= "list-inline-item" > Lorem ipsum </li> <li class= "list-inline-item" > Phasellus iaculis </li> <li class= "list-inline-item" > Nulla volutpat </li> </ ul > Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items , meaning you will need to add the class for any nested lists as well. inline
Use .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side.
Use .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side.
Justify-Content .justify-content-start .justify-content-end .justify-content-center .justify-content-between .justify-content-around
Align-items .align-items-start .align-items-end .align-items-center .align-items-baseline .align-items-stretch
Bootstrap Table 4 main classes: . table . table-striped .table-bordered .table-hover 5 contextual classes: . active . success . info . warning . danger
Bootstrap Table
Bootstrap Tables
Bootstrap Tables
Bootstrap Images 3 main classes: . rounded . rounded -circle . img-thumbnail
Rounded Corners The .rounded class adds rounded corners to an image (IE8 does not support rounded corners): Circle The .rounded -circle class shapes the image to a circle (IE8 does not support rounded corners): Thumbnail The . img -thumbnail class shapes the image to a thumbnail: Responsive Images Images comes in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen. Create responsive images by adding an . img -responsive class to the < img > tag. The image will then scale nicely to the parent element. The . img -responsive class applies display: block; and max-width: 100%; and height: auto; to the image: Bootstrap Images
Bootstrap Images
Bootstrap Alerts Bootstrap provides an easy way to create predefined alert messages Alerts are created with the .alert class, followed by one of the four contextual classes .alert-success .alert-info .alert-warning .alert-danger
Bootstrap Alerts
Button Styles Bootstrap provides seven styles of buttons with the following classes: . btn -default . btn -primary . btn -success . btn -info . btn -warning . btn -danger . btn -link Bootstrap Buttons The button classes can be used on the following elements: <a> <button> <input>
Button Sizes Bootstrap provides four button sizes with the following classes: . btn -lg . btn -md . btn-sm . btn-xs Active/Disabled Button: A button can be set to an active (appear pressed) or a disabled (unclickable) state: The class .active makes a button appear pressed, and the class .disabled makes a button unclickable Block Level Buttons A block level button spans the entire width of the parent element. Add class . btn -block to create a block level button
Bootstrap Buttons Bootstrap provides seven styles of buttons: To achieve the button styles above, Bootstrap has the following contextual classes: .btn-default .btn-primary .btn-success .btn-info .btn-warning .btn-danger .btn-link
Bootstrap Buttons
Bootstrap Glyphicons Bootstrap provides 260 glyphicons from the Glyphicons Halflings set ( http://getbootstrap.com/components/)
Bootstrap Glyphicons
Bootstrap Labels Labels are used to provide information about something Bootstrap create labels with colorful backgrounds to highlight the text inside de label Use the .label class, followed by one of the six contextual classes . label-default, .label- primary , .label-success , .label-info , .label-warning or .label-danger
Bootstrap Panels A panel in bootstrap is a bordered box with some padding around its content that can be use to highlight or separated some information Like other bootstrap elements panel has contextual classes also ( .panel-default , .panel-primary , .panel- success , .panel-info , .panel-warning , or .panel- danger )
PAGE LAYOUT IN BOOTSTRAP
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 80
- Slides 57
- Age 414 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views