Bootstrap SLIDES for web development course

dreamy678 80 views 57 slides Oct 13, 2024
Slide 1
Slide 1 of 57
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36
Slide 37
37
Slide 38
38
Slide 39
39
Slide 40
40
Slide 41
41
Slide 42
42
Slide 43
43
Slide 44
44
Slide 45
45
Slide 46
46
Slide 47
47
Slide 48
48
Slide 49
49
Slide 50
50
Slide 51
51
Slide 52
52
Slide 53
53
Slide 54
54
Slide 55
55
Slide 56
56
Slide 57
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