Bootstrap - Intro

.Bootstrap

Web page by Kevin Harris of Homer IL

Please contact Kevin Harris of Homer IL concerning this web site

Introduction

The first section covered the core concepts in Bootstrap version 2. I updated the code for Bootstrap 3.3.37. Bootstrap Migrating from V2 to V3 From version 2 to version 3, several class names were changed, glyphicons were used instead of icons, and the layout was changed to incorporate the screen sizes (xs, xm, lg, xl) as discussed in the next section. The new screen layout was part of the move in Bootstrap 3 to incorporate the responsive design elements into the core. The separate "responsive" bootstrap files no longer exist in Bootstrap 3.

 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
<head>
    <link href="Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
    <link href="Bootstrap-3.3.7/css/bootstrap-theme.css" rel="stylesheet" />
    <title>Bootstrap Buttons</title>
    <meta charset="utf-8" />
    <style>
        .table-striped > tbody > tr:nth-of-type(odd) {
            background-color: #999;
        }
        .table-hover > tbody > tr:hover {
            background-color: #700;
        }
    </style>
</head>
<body>
    <h1>Bootstrap</h1>
    <p class="alert alert-danger">Alert Danger paragraph</p>

    <span class="glyphicon glyphicon-search"></span>

    <!--<p class="lead">-->
    <p class="well">
        Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive,
        mobile first projects on the web. Bootstrap is an open-source front end framework
        originally developed by Mark Otto and Jacob Thornton at Twitter. Bootstrap is
        the most-starred project on GitHub, with over 90K stars and more than 38K forks.
        Bootstrap 2 was released in 2012 with support for responsive design. Bootstrap 3 was
        released in 2013 moving to a mobile first approach. The first alpha version of
        Bootstrap 4 was released in late 2015. Bootstrap has CSS and HTML template for
        themes and interface components.
    </p>

    <p>
        Bootstrap is not tied to any frameworks. It is used with .Net, Ruby on Rails, Python, etc.
        Bootstrap is modular and you can choose which modules you want and build custom versions of Bootstrap.
        Bootstrap contains most of the components typically required by websites. It contains jQuery plugins for
        many components and effects (e.g. alert, dropdowns, modals, carousel, tooltips, etc.). However it may
        need to be enhanced with external jQuery plugins (e.g. jQueryUI) for advanced components (e.g. auto-completion).
        Bootstrap uses normalize.css for cross-browser rendering.
    </p>
    <p>
        The screen layout in Bootstrap is based on 12 grid units making up a logical row. A screen can be set up with
        any combination of column units that add up to 12 per row. For example if you wish to have 3 screen columns,
        you might set it ups as (.col-xx.4 + .col-xx.4 + .col-xx.4) or (.col-xx.3 + .col-xx.6 + .col-xx.3). The columns
        response by floating left when the screen is resized. Bootstrap contains classes which control the appearance
        of the HTML elements. Common abbreviations are used in classes. For sizing, it uses xs, sm, md, lg. Color elements
        may contain: active success, primary, warning, and danger. The responsive size levels used by Bootstrap are:
    </p>

    <ul>
        <li>Main CSS (Common Design) 0 - 480px</li>
        <li> &gt; 480px</li>
        <li> &gt; 768px</li>
        <li> &gt; 992px</li>
        <li> &gt; 1200px</li>
    </ul>

    <table class="table table-striped table-hover">
        <tr>
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
        </tr>
        <tr>
            <td>onea</td>
            <td>twoa</td>
            <td>threea</td>
        </tr>
        <tr>
            <td>oneb</td>
            <td>twob</td>
            <td>threeb</td>
        </tr>
        <tr>
            <td>onec</td>
            <td>twoc</td>
            <td>threec</td>
        </tr>
    </table>
    <script src="Bootstrap-3.3.7/jquery-3.1.0.js"></script>
    <script src="Bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>



Responsive Grid Layout

.Responsive Layout Grid


Responsive Layout Grid

Grids and HTML work well together as each HTML element is a rectange (with a width, height, margin, padding, border), i.e. known ad the "CSS Box Model". Originally tables use to be used as the grid for web page layout, but was replaced as layout frameworks began to appear, such as Fluid 960 GS, Blueprint, and YUI Grids. Bootstrap is one of the newer frameworks which includes a grid layout.

  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
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Layout2</title>
    <meta charset="utf-8" />
    <link href="Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
    <style>
        .mylg {
            background-color: red;
            margin: 10px;
        }

        .mymd {
            background-color: green;
            margin: 10px;
        }

        .mysm {
            background-color: blue;
            margin: 10px;
        }

        div:before {
            position: absolute;
            width: 10px;
            height: 100%;
            top: 0;
            left: -10px;
            content: "";
            background: #fff;
            bottom: -5px;
        }
    </style>
</head>
<body>
    <!--<div class="container">-->
        <div class="container-fluid">
            <div class="row mylg">
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
                <div class="col-lg-1">1</div>
            </div>
            <div class="row mylg">
                <div class="col-lg-3">3</div>
                <div class="col-lg-4">4</div>
                <div class="col-lg-5">5</div>
            </div>
            <div class="row mylg">
                <div class="col-lg-7">7</div>
                <div class="col-lg-5">5</div>
            </div>

            <div class="row mylg">
                <div class="col-lg-12">12</div>
            </div>

            <div class="row mymd">
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
                <div class="col-md-1">1</div>
            </div>
            <div class="row mymd">
                <div class="col-md-3">3</div>
                <div class="col-md-4">4</div>
                <div class="col-md-5">5</div>
            </div>
            <div class="row mymd">
                <div class="col-md-7">7</div>
                <div class="col-md-5">5</div>
            </div>

            <div class="row mymd">
                <div class="col-md-12">12</div>
            </div>


            <div class="row mysm">
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
                <div class="col-sm-1">1</div>
            </div>
            <div class="row mysm">
                <div class="col-sm-3">3</div>
                <div class="col-sm-4">4</div>
                <div class="col-sm-5">5</div>
            </div>
            <div class="row mysm">
                <div class="col-sm-7">7</div>
                <div class="col-sm-5">5</div>
            </div>

            <div class="row mysm">
                <div class="col-sm-12">12</div>
            </div>
        </div>
    <script src="Bootstrap-3.3.7/jquery-3.1.0.js"></script>
    <script src="Bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>
 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
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Layout</title>
    <meta charset="utf-8" />
    <link href="Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container-fluid">
        <div class="row">

            <div class="col-lg-2">
                <h1>The h1 header</h1>

                <p>
                    Bootstrap is modular and consists essentially of a series of Less stylesheets that implement the various
                    components of the toolkit. A stylesheet called bootstrap less includes the components stylesheets. Developers
                    can adapt the Bootstrap file itself, selecting the components they wish to use in their project. Adjustments
                    are possible to a limited extent through a central configuration stylesheet. More profound changes are possible
                    by the Less declarations. The use of Less stylesheet language allows the use of variables, functions and
                    operators, nested selectors, as well as so-called mixins.
                </p>
                <!--<img class="hidden-xs img-responsive" src="Images/sbc_panf.png" />-->
                <!--<img class="hidden-lg img-responsive" src="Images/sbc_panf.png" />-->
                <img class="visible-xs img-responsive" src="Images/sbc_panf.png" />
            </div>

            <div class="col-lg-10">
                <p>
                    As of Bootstrap 4, Sass will be used for stylesheets instead of Less. Grid system and responsive design comes
                    standard with a 1170 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout.
                    For both cases, the toolkit has four variations to make use of different resolutions and types of devices:
                    mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts
                    the width of the columns.
                </p>
            </div>
        </div>
    </div>
    <script src="Bootstrap-3.3.7/jquery-3.1.0.js"></script>
    <script src="Bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>



Everyday Usage

.Everyday Usage


Everyday Usage

Below is a sample of everyday usage of bootstrap. Text colors and styles, tables, buttons, button groups, and forms. Also are example of using glypicons. Bootstrap provides 260 glyphicons from the Glyphicons Halflings set. Glyphicons can be used in many elements, such as text, buttons, toolbars, navigation, and forms.

  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
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap EveryDay Items</title>
    <meta charset="utf-8" />
    <link href="Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container-fluid">

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Text Styles</u></h2>
                <p class="text-warning pull-right">Warning Text</p>
                <p class="text-error">Error Text</p>
                <p class="text-info">Info Text</p>
                <p class="text-success">Success Text</p>
                <abbr title="Model View Controller">MVC</abbr>
                <br /><br /><br /><br />
                <blockquote>Nobody goes there anymore. It's too crowded.</blockquote>
                <small><cite>Yogi Berra</cite></small>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Definition List - Horizontal</u></h2>
                <dl class="dl-horizontal">
                    <dt>Boostrap</dt>
                    <dd>A font end framework for the web.</dd>
                    <dt>CSS</dt>
                    <dd>Cascading Style Sheets control fonts, colors, and spacing in web documents.</dd>
                </dl>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Table</u></h2>
                <table class="table table-striped table-hover table-bordered table-condensed">
                    <caption>Table One</caption>
                    <thead>
                        <tr>
                            <th>col1</th>
                            <th>col2</th>
                            <th>col3</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="success">
                            <td>onea</td>
                            <td>twoa</td>
                            <td>threea</td>
                        </tr>
                        <tr class="warning">
                            <td>oneb</td>
                            <td>twob</td>
                            <td>threeb</td>
                        </tr>
                        <tr class="info">
                            <td>onec</td>
                            <td>twoc</td>
                            <td>threec</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Buttons</u></h2>
                <table>
                    <tr>
                        <td>
                            <button type="button" class="btn">btn</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-primary">btn-primary</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-info">btn-info</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-inverse">btn-inverse</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-link">btn-link</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn btn-primary btn-lg">btn-lg</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <button type="button" class="btn-primary disabled">btn-primary disabled</button>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#" class="btn btn-success btn-lg">
                                <span class="glyphicon glyphicon-print"></span> Print
                            </a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Button Group</u></h2>
                <div class="btn-group">
                    <a href="#" class="btn btn-success btn-lg">
                        <span class="glyphicon glyphicon-print"></span>
                    </a>
                    <a href="#" class="btn btn-success btn-lg">
                        <span class="glyphicon glyphicon-search"></span>
                    </a>
                    <a href="#" class="btn btn-success btn-lg">
                        <span class="glyphicon glyphicon-envelope"></span>
                    </a>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Vertical (basic) Form</u></h2>
                <form role="form">
                    <div class="form-group">
                        <label for="email">Email:</label>
                        <input type="email" class="form-control" id="email" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                    <div class="radio">
                        <label><input type="radio" name="option"> Option 1</label>
                        <label><input type="radio" name="option"> Option 2</label>
                    </div>
                    <textarea class="form-control" id="describe" rows="3"></textarea>
                    <br />
                    <button type="submit" class="btn btn-primary">Submit</button>
                </form>
                <br />

                <div>
                    <div class="input-group" style="margin-top: 5px;">
                        <input type="text" data-i-search-input="true" class="form-control" name="word" value="word" data-autocomplete="true" data-autocomplete-url="" placeholder="Enter word">
                        <span class="input-group-btn"><button class="btn btn-primary" type="submit">Search</button></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Inline Form</u></h2>
                <form class="form-inline" role="form">
                    <div class="form-group">
                        <label for="email">Email address:</label>
                        <input type="email" class="form-control" id="email">
                    </div>
                    <div class="form-group">
                        <label for="pwd">Password:</label>
                        <input type="password" class="form-control" id="pwd">
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 5px; margin-bottom: 10px">
        <div class="col-xs-12">
            <h2><u>Horizontal Form</u></h2>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="email">Email:</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email" placeholder="Enter email">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label><input type="checkbox"> Remember me</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="row" style="margin-top: 5px; margin-bottom: 10px">
        <div class="col-xs-12">
            <h2><u>Input Form Sizing</u></h2>
            <form role="form">
                <div class="form-group">
                    <label for="inputdefault">Default input</label>
                    <input class="form-control" id="inputdefault" type="text">
                </div>
                <div class="form-group col-xs-5">
                    <label for="inputsm">input-sm</label>
                    <input class="form-control input-sm" id="inputsm" type="text">
                </div>
            </form>

        </div>
    </div>
    <script src="Bootstrap-3.3.7/jquery-3.1.0.js"></script>
    <script src="Bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>



Components

.Components


Components

  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
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html>
<html>
<head>
    <title>Components</title>
    <meta charset="utf-8" />
    <link href="Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <h2>Drop Down Menu</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 50px">
            <div class="col-xs-12">
                <h6><u>Drop Down</u></h6>
                <div class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        Drop Down Menu
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" target="_blank">Link 1</a></li>
                        <li><a href="#" target="_blank">Link 2</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu">
                            <a href="#">More Links</a>
                            <ul><li><a href="#" target="_blank">Link 3</a></li></ul>
                            <ul><li><a href="#" target="_blank">Link 4</a></li></ul>
                            <ul><li><a href="#" target="_blank">Link 5</a></li></ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <h2>Button Groups</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Button Group</u></h6>
                <div class="btn-group">
                    <button class="btn"><span class="glyphicon glyphicon-print"></span></button>
                    <button class="btn"><span class="glyphicon glyphicon-search"></span></button>
                    <button class="btn"><span class="glyphicon glyphicon-envelope"></span></button>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Button Group Vertical</u></h6>
                <div class="btn-group-vertical">
                    <button class="btn"><span class="glyphicon glyphicon-print"></span></button>
                    <button class="btn"><span class="glyphicon glyphicon-search"></span></button>
                    <button class="btn"><span class="glyphicon glyphicon-envelope"></span></button>
                </div>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 50px">
            <div class="col-xs-12">
                <h6><u>toolbar</u></h6>
                <div class="btn-toolbar">
                    <div class="btn-group">
                        <button class="btn"><span class="glyphicon glyphicon-print"></span></button>
                        <button class="btn"><span class="glyphicon glyphicon-search"></span></button>
                        <button class="btn"><span class="glyphicon glyphicon-envelope"></span></button>
                    </div>
                    <div class="btn-group">
                        <button class="btn"><span class="glyphicon glyphicon-print"></span></button>
                        <button class="btn"><span class="glyphicon glyphicon-search"></span></button>
                        <button class="btn"><span class="glyphicon glyphicon-envelope"></span></button>
                    </div>
                </div>
            </div>
        </div>

        <h2>Split Button</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 50px">
            <div class="col-xs-12">
                <h6><u>Primary Large</u></h6>
                <div class="btn-group">
                    <a class="btn btn-primary btn-lg" href="#">
                        Go To Site
                    </a>
                    <a class="btn btn-primary btn-lg dropdown-toggle" data-toggle="dropdown" href="#">
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#" target="_blank">Link 1</a></li>
                        <li><a href="#" target="_blank">Link 2</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu">
                            <a href="#">More Links</a>
                            <ul><li><a href="#" target="_blank">Link 3</a></li></ul>
                            <ul><li><a href="#" target="_blank">Link 4</a></li></ul>
                            <ul><li><a href="#" target="_blank">Link 5</a></li></ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <h2>Tabs and Pills</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 50px">
            <div class="col-xs-12">
                <h6><u>Nav Tabs</u></h6>
                <ul class="nav nav-tabs">
                    <!--<ul class="nav nav-stacked pull-right">-->
                    <li><a href="#">Link 1</a></li>
                    <li class="active"><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-3">
                <h6><u>Nav Pills</u></h6>
                <ul class="nav nav-pills nav-stacked">
                    <!--<ul class="nav nav-stacked pull-right">-->
                    <li><a href="#">Link 1</a></li>
                    <li class="active"><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                </ul>
            </div>
            <div class="col-xs-9"></div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-3">
                <h6><u>Nav List</u></h6>
                <ul class="nav nav-list">
                    <li class="nav-header">Header</li>
                    <li><a href="#">Link 1</a></li>
                    <li class="active"><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            Drop Down
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#" target="_blank">Link 1a</a></li>
                            <li><a href="#" target="_blank">Link 2a</a></li>
                            <li class="divider"></li>
                            <li class="dropdown-submenu">
                                <a href="#">More Links</a>
                                <ul><li><a href="#" target="_blank">Link 3a</a></li></ul>
                                <ul><li><a href="#" target="_blank">Link 4a</a></li></ul>
                                <ul><li><a href="#" target="_blank">Link 5a</a></li></ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-xs-9"></div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Tabbable</u></h6>
                <div class="tabbable">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#tab1" data-toggle="tab">Tab 1</a>
                        </li>
                        <li>
                            <a href="#tab2" data-toggle="tab">Tab 2</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab1">
                        <p>content ONE</p>
                    </div>
                    <div class="tab-pane" id="tab2">
                        <p>content TWO</p>
                    </div>
                </div>
            </div>
        </div>


        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Navbar Basic</u></h6>
                <nav class="navbar navbar-default">
                    <!--Add about 40 px top-margin to body when using navbar-fixed-top-->
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">Brand</a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">Link</a></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            </div>
        </div>

        <!-- Good Mobile Navbar -->
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Mobile Navbar</u></h6>
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                    data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">Brand</a>
                        </div>

                        <!-- Basic with Drop Down List and Search  -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
                            <ul class="nav navbar-nav">
                                <!--Add about 40 px top-margin to body when using navbar-fixed-top-->
                                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">Link</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                       aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">One more separated link</a></li>
                                    </ul>
                                </li>
                            </ul>
                            <form class="navbar-form navbar-left">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="Search">
                                </div>
                                <button type="submit" class="btn btn-default">Submit</button>
                            </form>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="#">Link</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">Action</a></li>
                                        <li><a href="#">Another action</a></li>
                                        <li><a href="#">Something else here</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">Separated link</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            </div>
        </div>

        <!--Breadcrumb-->
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>BreadCrumb</u></h6>
                <ul class="breadcrumb">
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Diag</a>
                    </li>
                    <li class="active">
                        bComponents
                    </li>
                </ul>
            </div>
        </div>

        <!--Pager-->
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Pager</u></h6>
                <ul class="pager">
                    <li class="previous"><span>Prev</span></li>
                    <li class="next"><span>Next</span></li>
                </ul>
            </div>
        </div>

        <!--Pagination-->
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Pagination</u></h6>
                <ul class="pager">
                    <li class="active"><a href="/folder1/article1?page=1">1</a></li>
                    <li><a href="/folder1/article1?page=1">2</a></li>
                    <li><a href="/folder1/article1?page=1">3</a></li>
                    <li><a href="/folder1/article1?page=1">4</a></li>
                </ul>
            </div>
        </div>

    </div>
    <script src="Bootstrap-3.3.7/jquery-3.1.0.js"></script>
    <script src="Bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>



JavaScript Components

.JavaScript Components


JavaScript Components

 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
    <title>Components</title>
    <meta charset="utf-8" />
    <link href="Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
    <script src="Bootstrap-3.3.7/jquery-3.1.0.js"></script>
    <script src="Bootstrap-3.3.7/js/bootstrap.js"></script>
</head>
<body>
    <div class="container">

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2><u>Button Click</u></h2>
                <button id="btnOne" type="button" class="btn btn-primary"
                        data-loading-text="Saving ..."
                        data-completed-text="Save Completed">
                    Save the file
                </button>
            </div>
        </div>

        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h2 id="modal"><u>Modal Popup</u></h2>

                <!--<a href="#themodal" role="button" class="btn btn-primary" data-toggle="modal">Launch a modal dialog</a>-->

                <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#themodal">Open Modal</button>

                <div id="themodal" class="modal fade" role="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h3>Modal header</h3>
                            </div>
                            <div class="modal-body">
                                <p>Are you sure you want to do this?</p>
                                <div class="progress">
                                    <div id ="theprogress" class="progress-bar" role="progressbar" aria-valuenow="0"
                                         aria-valuemin="0" aria-valuemax="100" style="width:0%">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <a href="#" class="btn" data-dismiss="modal">Close</a>
                                <a id="yesbutton" href="#" class="btn btn-primary" data-loading-text="Doing it...">Yes! Do it now!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var yesButton = $("#yesbutton");
                var theModal = $("#themodal");                
                var progressb = $("#theprogress");
              
                yesButton.click(function () {
                    yesButton.button("loading");

                    var counter = 0;
                    var countDown = function () {
                        counter++;
                        if (counter == 11) {
                            yesButton.button("reset");
                            theModal.modal("hide");
                            $("#theprogress").css("width", "0%");
                        }
                        else {
                            $("#theprogress").css("width", counter * 10 + "%");
                            setTimeout(countDown, 500);
                        }
                    };
                    setTimeout(countDown, 500);                    
                });
            });
        </script>
    </div>

    <script>
        //Change the button text clicked and finished
        $(function () {
            $("#btnOne").click(function () {
                var btn = $(this);
                btn.button("loading");

                setTimeout(function () {
                    //btn.button("reset");
                    btn.button("completed");
                }, 2000);
            })
        });
    </script>
</body>
</html>



Labels and Badges

.Labels and Badges


Labels and Badges

  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
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
    <title>bTextBadgesLabels</title>
    <meta charset="utf-8" />
    <link href="Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" />
    <style>
        .myBadge {
            border-radius: 1em;
        }
    </style>
</head>
<body>
    <div class="container">

        <h2>Jumbotron</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Jumbotron</u></h6>
                <div class="jumbotron">
                    <h1>This is a jumbotron</h1>
                    <p>
                        A large area for prominently displaying text.
                    </p>
                </div>
            </div>
        </div>

        <h2>Labels</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Labels</u></h6>
                <table>
                    <tr><td><span class="label">Default Label</span></td></tr>
                    <tr><td><span class="label label-primary">Primary Label</span></td></tr>
                    <tr><td><span class="label label-success">Success Label</span></td></tr>
                    <tr><td><span class="label label-warning">Warning Label</span></td></tr>
                    <tr><td><span class="label label-danger">Danger Label</span></td></tr>
                    <tr><td><span class="label label-info">Info Label</span></td></tr>
                    <tr><td><span class="label label-inverse">Inverse Label</span></td></tr>
                </table>
            </div>
        </div>

        <h2>Badges</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Badges</u></h6>
                <table>
                    <tr><td><span class="label myBadge">D</span></td></tr>
                    <tr><td><span class="label label-primary myBadge">P</span></td></tr>
                    <tr><td><span class="label label-success myBadge">S</span></td></tr>
                    <tr><td><span class="label label-warning myBadge">W</span></td></tr>
                    <tr><td><span class="label label-danger myBadge">D</span></td></tr>
                    <tr><td><span class="label label-info myBadge">I</span></td></tr>
                    <tr>
                        <td>
                            <span class="tag label label-info">
                                <a><i class="glyphicon glyphicon-print"></i></a>
                            </span>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <h2>Alert</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Alert</u></h6>
                <div class="alert alert-danger">
                    <button class="close" data-dismiss="alert">&times;</button>
                    <strong>Alert with button requires JavaScript</strong>
                </div>
            </div>
        </div>


        <h2>Media Component</h2>
        <div class="row" style="margin-top: 5px; margin-bottom: 10px">
            <div class="col-xs-12">
                <h6><u>Media Component</u></h6>
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="/bootstrap/images/64.jpg" alt="Media Object">
                    </a>

                    <div class="media-body">
                        <h4 class="media-heading">Media heading</h4>
                        This is some sample text. This is some sample text.
                        This is some sample text. This is some sample text.
                        This is some sample text. This is some sample text.
                        This is some sample text. This is some sample text.
                    </div>

                </div>
            </div>
        </div>


    </div>
    <script src="Bootstrap-3.3.7/jquery-3.1.0.js"></script>
    <script src="Bootstrap-3.3.7/js/bootstrap.js"></script>
</body>
</html>



Top


Error | ASP.NET Developer

Error

Error message

  • Warning: Cannot modify header information - headers already sent by (output started at /srv/disk9/1218369/www/kcshadow.net/aspnet/includes/common.inc:2748) in drupal_send_headers() (line 1232 of /srv/disk9/1218369/www/kcshadow.net/aspnet/includes/bootstrap.inc).
  • PDOException: SQLSTATE[42000]: Syntax error or access violation: 1142 INSERT command denied to user '1218369_b2cf'@'185.176.40.58' for table 'watchdog': INSERT INTO {watchdog} (uid, type, message, variables, severity, link, location, referer, hostname, timestamp) VALUES (:db_insert_placeholder_0, :db_insert_placeholder_1, :db_insert_placeholder_2, :db_insert_placeholder_3, :db_insert_placeholder_4, :db_insert_placeholder_5, :db_insert_placeholder_6, :db_insert_placeholder_7, :db_insert_placeholder_8, :db_insert_placeholder_9); Array ( [:db_insert_placeholder_0] => 0 [:db_insert_placeholder_1] => cron [:db_insert_placeholder_2] => Attempting to re-run cron while it is already running. [:db_insert_placeholder_3] => a:0:{} [:db_insert_placeholder_4] => 4 [:db_insert_placeholder_5] => [:db_insert_placeholder_6] => http://www.kcshadow.net/aspnet/?q=bootstrapintro [:db_insert_placeholder_7] => [:db_insert_placeholder_8] => 54.162.171.242 [:db_insert_placeholder_9] => 1534727936 ) in dblog_watchdog() (line 160 of /srv/disk9/1218369/www/kcshadow.net/aspnet/modules/dblog/dblog.module).
The website encountered an unexpected error. Please try again later.