Instructions for Retail Team

From Bloomex Wiki
Revision as of 15:03, 18 April 2024 by Sergey Ershov (talk | contribs)
Jump to navigation Jump to search

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>

   </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-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-7
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-5
.col-sm-7
.col-sm-6
.col-sm-6
.col-sm-12

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

<thead> </thead> <tbody> </tbody>
  
                     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>

<label class="custom-file"> <input type="file" id="file" class="custom-file-input"> </label> 

       </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).

<thead> </thead> <tbody> </tbody>
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.

<thead> </thead> <tbody> </tbody>
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.

<thead class="thead-inverse"> </thead> <tfoot> </tfoot> <tbody> </tbody>
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell Cell Cell
Cell Cell Cell
Cell Cell Cell 
       </section>

       <footer>

© Somebody 2016

       </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>

Retrieved from "https://wiki.necs.ca/index.php?title=Instructions_for_Retail_Team&oldid=3952"