Revision as of 15:03, 18 April 2024

here should be groups or list of instructions <!DOCTYPE html> <html lang="en">

 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="description" content="">
   <meta name="author" content="">
   <link rel="icon" href="/favicon.ico">

   <title>Bootstrap 4 Template</title>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">
     
   <style>
       section {
           padding: 70px 0;
           border-bottom: 1px dotted #ccc;
       }

       /* So that we can see the grid */
       .grid-example  div[class^="col"] {
           border: 1px solid white;
           background: lightblue;
           text-align: center;
           padding-top: 8px;
           padding-bottom: 8px;
           }
       /* Overide Jumbotron's color */
       .jumbotron {
   background-color: lightskyblue;
       }
   </style>

 </head>

 <body data-spy="scroll" data-target="#navbar-example">

   <nav id="topNav" class="navbar navbar-full navbar-static-top navbar-dark bg-inverse">

           <button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
               ☰
           </button>
           <a class="navbar-brand" href="#">Logo</a>

<a class="nav-link" href="#grid">Grid</a>
<a class="nav-link" href="#cards">Cards</a>
<a class="nav-link" href="#tags">Tags</a>
<a class="nav-link" href="#customForms">Forms</a>
<a class="nav-link" href="#outlineButtons">Buttons</a>
<a class="nav-link" href="#progress">Progress Bars</a>
<a class="nav-link" href="#tables">Tables</a>

   </nav>

Fluid Jumbotron!

This is a fluid jumbotron. Fluid jumbotrons occupy the entire horizontal space of its parent.

Fluid jumbotrons are new in Bootstrap 4.

<a class="btn btn-primary btn-lg" href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_jumbotron.cfm" role="button">Jumbotron Examples »</a>

       <section id="grid">

Bigger Grid

OK, maybe not bigger but... Bootstrap 4 uses a 5 tier grid system compared to the 4 tier grid system in Bootstrap 3.

Bootstrap 4 added sm to its grid classes, so it now supports xs, sm, md, lg, and xl (for example, class="col-sm-6).

.col-sm-1

.col-sm-2

.col-sm-3

.col-sm-7

.col-sm-4

.col-sm-5

.col-sm-7

.col-sm-6

.col-sm-12

The following table shows how different grid options work with different viewport sizes.

	Extra small <34em	Small ≥34em	Medium ≥48em	Large ≥62em	Extra large ≥75em
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	34rem	45rem	60rem	72.25rem
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Number of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

       </section>

       <section id="cards">

Introducing Cards

In Bootstrap 4, <a href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_cards.cfm">cards</a> replace panels, thumbnails and wells from Bootstrap 3.

Card 1

Text for this card.

Card 2

Text for this card.

Card 3

Text for this card. Here's <a href="#" class="card-link">why</a>.

Footer

Card 4

Text for this card.

Footer

Card 5

Text for this card.

Card 6

Text for this card. Here's <a href="#" class="card-link">why</a>.

Card 7

Text for this card. Here's <a href="#" class="card-link">why</a>.

Footer

Card 8

Text for this card.

       </section>
       
       <section id="tags">

Introducing Tags

Bootstrap's tag classes can be used to highlight additional information that's appended to a string of text.

<a href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_tags.cfm">Tags</a> replace labels from Bootstrap 3.

Contextual Tags

Add some color based on context.

Default Primary Success Info Warning Danger

Pill Tags

Use the .tag-pill class to give your tags rounded corners.

Default Primary Success Info Warning Danger

       </section>

       <section id="customForms">

Introducing Custom Forms

Bootstrap 4 introduces <a href="http://www.quackit.com/bootstrap/bootstrap_4/tutorial/bootstrap_custom_forms.cfm">custom forms</a>. These are custom form elements that completely replace the browser defaults. The idea behind custom forms is that they allow for more customization and cross browser consistency.

<label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> Boots </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> Shoes </label>

               <label class="custom-control custom-radio">
                   <input id="radioStacked1" name="radio-stacked" type="radio" class="custom-control-input">
                   
                   Boots
               </label>
               <label class="custom-control custom-radio">
                   <input id="radioStacked2" name="radio-stacked" type="radio" class="custom-control-input">
                   
                   Shoes
               </label>

<select class="custom-select"> <option selected>Choose One...</option> <option value="1">Boots</option> <option value="2">Shoes</option> <option value="3">Feet</option> </select>

       </section>

       <section id="outlineButtons">

Outline Buttons

Bootstrap 4 introduces outline buttons — buttons with a contextual outline.

           <button type="button" class="btn btn-lg btn-outline-primary">Primary</button>
           <button type="button" class="btn btn-lg btn-outline-secondary">Secondary</button>
           <button type="button" class="btn btn-lg btn-outline-info">Info</button>
           <button type="button" class="btn btn-lg btn-outline-success">Success</button>
           <button type="button" class="btn btn-lg btn-outline-warning">Warning</button>
           <button type="button" class="btn btn-lg btn-outline-danger">Danger</button>
       </section>

       <section id="progress">

Progress Bars

Bootstrap 4 takes advantage of the HTML5 <a href="http://www.quackit.com/html/tags/html_progress_tag.cfm"><progress></a> element when working with progress bars.

           <progress class="progress progress-success" value="73" max="100">73%</progress>
           <progress class="progress progress-info" value="500" max="1000">50%</progress>
           <progress class="progress progress-warning" value="35" max="100">35%</progress>
           <progress class="progress progress-danger" value="200" max="1000">20%</progress>     
       </section>

       <section id="tables">

Responsive Tables

Bootstrap 4 allows you to apply the .table-responsive class directly to the table (as opposed to being required to apply it to a parent element, like in Bootstrap 3).

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

       </section>
       <section>

Reflow Tables

There's a new .table-reflow class that effectively turns your table on its side.

Header 1	Header 2	Header 3	Header 4	Header 5	Header 6	Header 7	Header 8	Header 9	Header 10
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

       </section>
       <section>

Table Head Styles

You can add background color to your table headers in Bootstrap 4.

Header 1	Header 2	Header 3
Footer 1	Footer 2	Footer 3
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

       </section>

       <footer>

       </footer>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>

   <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>

   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/js/bootstrap.min.js" integrity="sha384-ux8v3A6CPtOTqOzMKiuo3d/DomGaaClxFYdCu2HPMBEkf6x2xiDyJ7gkXU0MWwaD" crossorigin="anonymous"></script>

   <script>
   // Initialize tooltip component
   $(function () {
     $('[data-toggle="tooltip"]').tooltip()
   })

   // Initialize popover component
   $(function () {
     $('[data-toggle="popover"]').popover()
   })
   </script>

 </body>

</html>

Instructions for Retail Team: Difference between revisions

Revision as of 15:03, 18 April 2024

Contents

Fluid Jumbotron!

Bigger Grid

Introducing Cards

Card 2

Card 5

Card 8

Introducing Tags

Contextual Tags

Pill Tags

Introducing Custom Forms

Outline Buttons

Progress Bars

Responsive Tables

Reflow Tables

Table Head Styles

Navigation menu

Instructions for Retail Team: Difference between revisions

Revision as of 15:03, 18 April 2024

Fluid Jumbotron!

Bigger Grid

Introducing Cards

Card 2

Card 5

Card 8

Introducing Tags

Contextual Tags

Pill Tags

Introducing Custom Forms

Outline Buttons

Progress Bars

Responsive Tables

Reflow Tables

Table Head Styles

Navigation menu

Search