bootstrap-magic/2.3.2/app/preview/form-states.html at dev · csseditor/bootstrap-magic · GitHub

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

<!-- Alerts & Messages
================================================== -->

<section id="form-states">
    <div class="row-fluid">
        <div class="span12">
            <div class="alert alert-block">
                <a title="Bootstrap Themes Generator" class="close">&times;</a>
                <h4 class="alert-heading">Alert block</h4>
                <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
            </div>

		    <div class="row-fluid">
		        <div class="span4">
		            <div class="alert alert-error">
		                <a title="Bootstrap Themes Generator" class="close">&times;</a>
		                <strong>Error</strong> Change a few things up and try submitting again.
		            </div>
		        </div>
		        <div class="span4">
		            <div class="alert alert-success">
		                <a title="Bootstrap Themes Generator" class="close">&times;</a>
		                <strong>Success</strong> You successfully read this important alert message.
		            </div>
		        </div>
		        <div class="span4">
		            <div class="alert alert-info">
		                <a title="Bootstrap Themes Generator" class="close">&times;</a>
		                <strong>Information</strong> This alert needs your attention, but it's not super important.
		            </div>
		        </div>
		    </div>

		    <div class="control-group warning">
		        <label class="control-label" for="inputWarning">Input with warning</label>
		        <div class="controls">
		            <input type="text" id="inputWarning">
		            <span class="help-inline">Something may have gone wrong</span>
		        </div>
		    </div>
		    <div class="control-group error">
		        <label class="control-label" for="inputError">Input with error</label>
		        <div class="controls">
		            <input type="text" id="inputError">
		            <span class="help-inline">Please correct the error</span>
		        </div>
		    </div>
		    <div class="control-group success">
		        <label class="control-label" for="inputSuccess">Input with success</label>
		        <div class="controls">
		            <input type="text" id="inputSuccess">
		            <span class="help-inline">Woohoo!</span>
		        </div>
		    </div>

		    <!--div class="row-fluid">
		        <div class="span4">
		            <div class="progress">
		                    <div class="bar" style="width: 60%;"></div>
		            </div>
		        </div>
		        <div class="span4">
		            <div class="progress progress-info progress-striped">
		                    <div class="bar" style="width: 30%;"></div>
		            </div>
		        </div>
		        <div class="span4">
		            <div class="progress progress-danger progress-striped active">
		                    <div class="bar" style="width: 45%"></div>
		            </div>
		        </div>
		    </div>

		    <div class="progress">
		    	<div class="bar" style="width: 10%;"></div>
		        <div class="bar bar-success" style="width: 14%;"></div>
		        <div class="bar bar-warning" style="width: 16%;"></div>
		        <div class="bar bar-danger" style="width: 18%;"></div>
		    </div>

		    <div class="progress progress-striped">
		    	<div class="bar" style="width: 15%;"></div>
		        <div class="bar bar-success progress-striped" style="width: 0%;"></div>
		        <div class="bar bar-warning progress-striped" style="width: 20%;"></div>
		        <div class="bar bar-danger progress-striped" style="width: 15%;"></div>
		    </div>

		    <div class="progress progress-striped active">
		        <div class="bar bar-success" style="width: 55%;"></div>
		        <div class="bar bar-warning" style="width: 15%;"></div>
		        <div class="bar bar-danger" style="width: 20%;"></div>
		    </div>-->
    	</div>

    	<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
    	<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
    	<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
    	<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
    	<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

        <h3 id="labels">Labels</h3>

        <span class="label">Default</span>
        <span class="label label-success">Success</span>
        <span class="label label-warning">Warning</span>
        <span class="label label-important">Important</span>
        <span class="label label-info">Info</span>
    	<span class="label label-inverse">Inverse</span>

        <h3 id="badges">Badges</h3>

        <span class="badge">1</span>
        <span class="badge badge-success">2</span>
        <span class="badge badge-warning">3</span>
        <span class="badge badge-important">4</span>
        <span class="badge badge-info">5</span>
        <span class="badge badge-inverse">6</span>

 	</div>
 </section>