|
0
|
1 # Labels
|
|
|
2
|
|
|
3 <span class="label label-default">Default</span>
|
|
|
4 <span class="label label-primary">Primary</span>
|
|
|
5 <span class="label label-success">Success</span>
|
|
|
6 <span class="label label-info">Info</span>
|
|
|
7 <span class="label label-warning">Warning</span>
|
|
|
8 <span class="label label-danger">Danger</span>
|
|
|
9
|
|
|
10 # Alerts
|
|
|
11
|
|
|
12 <div class="alert alert-success" role="alert"><b>Well done!</b> You successfully read this important alert message. </div>
|
|
|
13 <div class="alert alert-info" role="alert"><b>Heads up!</b> This alert needs your attention, but it's not super important. </div>
|
|
|
14 <div class="alert alert-warning" role="alert"><b>Warning!</b> Better check yourself, you're not looking too good. </div>
|
|
|
15 <div class="alert alert-danger" role="alert"><b>Oh snap!</b> Change a few things up and try submitting again. </div>
|
|
|
16
|
|
|
17 # Panels
|
|
|
18
|
|
|
19 <div class="panel panel-default">
|
|
|
20 <div class="panel-heading">Panel heading without title</div>
|
|
|
21 <div class="panel-body">
|
|
|
22 Panel content
|
|
|
23 </div>
|
|
|
24 </div>
|
|
|
25
|
|
|
26 <div class="panel panel-primary">
|
|
|
27 <div class="panel-heading">Panel heading without title</div>
|
|
|
28 <div class="panel-body">
|
|
|
29 Panel content
|
|
|
30 </div>
|
|
|
31 </div>
|
|
|
32
|
|
|
33 <div class="panel panel-success">
|
|
|
34 <div class="panel-heading">Panel heading without title</div>
|
|
|
35 <div class="panel-body">
|
|
|
36 Panel content
|
|
|
37 </div>
|
|
|
38 </div>
|
|
|
39
|
|
|
40 <div class="panel panel-info">
|
|
|
41 <div class="panel-heading">Panel heading without title</div>
|
|
|
42 <div class="panel-body">
|
|
|
43 Panel content
|
|
|
44 </div>
|
|
|
45 </div>
|
|
|
46
|
|
|
47 <div class="panel panel-warning">
|
|
|
48 <div class="panel-heading">Panel heading without title</div>
|
|
|
49 <div class="panel-body">
|
|
|
50 Panel content
|
|
|
51 </div>
|
|
|
52 </div>
|
|
|
53
|
|
|
54 <div class="panel panel-danger">
|
|
|
55 <div class="panel-heading">Panel heading without title</div>
|
|
|
56 <div class="panel-body">
|
|
|
57 Panel content
|
|
|
58 </div>
|
|
|
59 </div>
|
|
|
60
|
|
|
61 # Wells
|
|
|
62
|
|
|
63 ## Default well
|
|
|
64
|
|
|
65 <div class="well">Look, I'm in a well! </div>
|
|
|
66
|
|
|
67 ## Optional classes
|
|
|
68
|
|
|
69 <div class="well well-lg">Look, I'm in a well! </div>
|
|
|
70
|
|
|
71 <div class="well well-sm">Look, I'm in a well! </div>
|
|
|
72
|
|
|
73 # Typography
|
|
|
74
|
|
|
75 ## Lead body copy
|
|
|
76
|
|
|
77 <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
|
|
|
78
|
|
|
79 ## Marked text
|
|
|
80
|
|
|
81 You can use the mark tag to <mark>highlight</mark> text.
|
|
|
82
|
|
|
83 ## Small text
|
|
|
84
|
|
|
85 <small>This line of text is meant to be treated as fine print.</small>
|
|
|
86
|
|
|
87 ## Alignment classes
|
|
|
88
|
|
|
89 <div class="panel panel-default">
|
|
|
90 <div class="panel-body">
|
|
|
91 <p class="text-left">Left aligned text.</p>
|
|
|
92 <p class="text-center">Center aligned text.</p>
|
|
|
93 <p class="text-right">Right aligned text.</p>
|
|
|
94 <p class="text-justify">Justified text.</p>
|
|
|
95 <p class="text-nowrap">No wrap text.</p>
|
|
|
96 </div>
|
|
|
97 </div>
|
|
|
98
|
|
|
99 ## Transformation classes
|
|
|
100
|
|
|
101 <div class="panel panel-default">
|
|
|
102 <div class="panel-body">
|
|
|
103 <p class="text-lowercase">Lowercased text.</p>
|
|
|
104 <p class="text-uppercase">Uppercased text.</p>
|
|
|
105 <p class="text-capitalize">Capitalized text.</p>
|
|
|
106 </div>
|
|
|
107 </div>
|
|
|
108
|
|
|
109
|
|
|
110 # Helper classes
|
|
|
111
|
|
|
112 ## Contextual colors
|
|
|
113
|
|
|
114 <div class="panel panel-default">
|
|
|
115 <div class="panel-body">
|
|
|
116 <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
|
|
117 <p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
|
118 <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
|
119 <p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
|
120 <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
|
121 <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
|
122 </div>
|
|
|
123 </div>
|
|
|
124
|
|
|
125 ## Contextual backgrounds
|
|
|
126
|
|
|
127 <div class="panel panel-default">
|
|
|
128 <div class="panel-body">
|
|
|
129 <p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
|
|
130 <p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
|
|
131 <p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
|
|
132 <p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
|
|
133 <p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
|
|
134 </div>
|
|
|
135 </div>
|
