gerrit.onap Code Review - portal/sdk.git/blob

   1 <div id="page-content" class="content">
   2         <div>
   3                 <h2>Bootstrap Sample Page</h2>
   4
   5                 <!-- dropdown sample -->
   6                 <h3>Bootstrap Dropdowns</h3>
   7                 <div class="dropdown">
   8                   <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
   9                     Dropdown
  10                     <span class="caret"></span>
  11                   </button>
  12                   <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  13                     <li><a href="#">Action</a></li>
  14                     <li><a href="#">Another action</a></li>
  15                     <li><a href="#">Something else here</a></li>
  16                     <li role="separator" class="divider"></li>
  17                     <li><a href="#">Separated link</a></li>
  18                   </ul>
  19                 </div>
  20
  21
  22                 <!-- Button group -->
  23                 <h3>Bootstrap Button Group</h3>
  24                 <div class="btn-group" role="group" aria-label="...">
  25                   <button type="button" class="btn btn-default">Left</button>
  26                   <button type="button" class="btn btn-default">Middle</button>
  27                   <button type="button" class="btn btn-default">Right</button>
  28                 </div>
  29
  30                 <!-- Single button dropdowns -->
  31                 <h3>Single Button Dropdowns</h3>
  32                 <div class="btn-group">
  33                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  34                     Action <span class="caret"></span>
  35                   </button>
  36                   <ul class="dropdown-menu">
  37                     <li><a href="#">Action</a></li>
  38                     <li><a href="#">Another action</a></li>
  39                     <li><a href="#">Something else here</a></li>
  40                     <li role="separator" class="divider"></li>
  41                     <li><a href="#">Separated link</a></li>
  42                   </ul>
  43                 </div>
  44
  45                 <!-- Table -->
  46                 <h3>Table Sample</h3>
  47                 <div class="panel panel-default">
  48                   <!-- Default panel contents -->
  49                   <div class="panel-heading">Table heading</div>
  50                   <div class="panel-body">
  51                     <p>Table description </p>
  52                   </div>
  53
  54                   <!-- Table -->
  55                   <table class="table">
  56                           <thead>
  57                                 <tr>
  58                                         <th>#</th>
  59                                         <th>First Name</th>
  60                                         <th>Last Name</th>
  61                                         <th>Username</th>
  62                                 </tr>
  63                           </thead>
  64                           <tbody>
  65                                 <tr>
  66                                         <th scope="row">1</th>
  67                                         <td>Mark</td> <td>Otto</td>
  68                                         <td>@mdo</td>
  69                                 </tr>
  70                                 <tr>
  71                                         <th scope="row">2</th>
  72                                         <td>Jacob</td>
  73                                         <td>Thornton</td>
  74                                         <td>@fat</td>
  75                                 </tr>
  76                                 <tr>
  77                                         <th scope="row">3</th>
  78                                         <td>Larry</td>
  79                                         <td>the Bird</td>
  80                                         <td>@twitter</td>
  81                                 </tr>
  82                           </tbody>
  83                   </table>
  84                 </div>
  85
  86
  87                 <!-- Checkboxes and radio addons -->
  88                 <h3>Checkboxes and radio addons</h3>
  89                 <p>In order to make bootstrap checkbox and radio button appear, please make sure b2b-bootstrap-common.css in app/fusion/external/ds2-bootstrap directory is included in the main HTML page.</p>
  90
  91                         <p>checkbox</p>
  92           <div class="form-check">
  93             <label class="form-check-label">
  94               <input type="checkbox" class="form-check-input">
  95               Y/N
  96             </label>
  97           </div>
  98
  99                 <div>
 100                         <p>radio button</p>
 101                         <div class="radio">
 102                           <label><input type="radio" name="optradio">Option 1</label>
 103                         </div>
 104                         <div class="radio">
 105                           <label><input type="radio" name="optradio">Option 2</label>
 106                         </div>
 107                         <div class="radio disabled">
 108                           <label><input type="radio" name="optradio" disabled>Option 3 (disabled)</label>
 109                         </div>
 110                 </div>
 111
 112                 <div class="row">
 113                    <div class="col-lg-6">
 114                       <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" aria-label="Checkbox for following text input"> </span> <input class="form-control" aria-label="Text input with checkbox"> </div>
 115                    </div>
 116                    <div class="col-lg-6">
 117                       <div class="input-group"> <span class="input-group-addon"> <input type="radio" aria-label="Radio button for following text input"> </span> <input class="form-control" aria-label="Text input with radio button"> </div>
 118                    </div>
 119                 </div>
 120
 121                 <h3>Available variations</h3>
 122                 <div>
 123                         <span class="label label-default">Default</span>
 124                         <span class="label label-primary">Primary</span>
 125                         <span class="label label-success">Success</span>
 126                         <span class="label label-info">Info</span>
 127                         <span class="label label-warning">Warning</span>
 128                         <span class="label label-danger">Danger</span>
 129                 </div>
 130
 131                 <h3>Checkbox</h3>
 132                 <div class="checkbox">
 133                   <label>
 134                     <input type="checkbox" value="">
 135                     Option one is this and that&mdash;be sure to include why it's great
 136                   </label>
 137                 </div>
 138                 <div class="checkbox disabled">
 139                   <label>
 140                     <input type="checkbox" value="" disabled>
 141                     Option two is disabled
 142                   </label>
 143                 </div>
 144
 145         </div>
 146 </div>