-
Notifications
You must be signed in to change notification settings - Fork 0
/
bootstrap.css
195 lines (92 loc) · 5.47 KB
/
bootstrap.css
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
<!-- What is Bootstrap?
Bootstrap is an open source project created by Twitter to enable creation of responsive, mobile first web pages. It's the most popular CSS framework and one of the top Github projects.
Why should I use Bootstrap?
Bootstrap offers a collection of CSS classes "out of the box" that allow developers to quickly create pages that scale to screens of different sizes. Developers can also decorate common UI components such as dialog boxes, buttons, forms, and tables with these classes. -->
<!-- We start with a skeleton HTML page. -->
<!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">
<title>Bootstrap Demo</title>
</head>
<body></body>
</html>
<!-- then add the current stable version of Bootstrap CSS inside our <head> element on line 11: -->
<!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">
<title>Bootstrap Demo</title>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body></body>
</html>
<!-- The Grid System
Bootstrap layouts are based on a 12-column grid. We use CSS classes to specify the width of each element. Each HTML element may take up to 12 columns of space. -->
<!-- Grid classes are based on screen size:
xs = Less than 768 pixels
sm = 768-991 pixels
md = 992-1199 pixels
lg = Greater than or equal to 1200 pixels
Suppose we want our page layout to consist of a main content area that takes up most of the page width but also include room for a sidebar on the left. -->
<!-- We can use the provided CSS classes to accomplish this: -->
<div id="side-bar" class="col-md-2">
<ul>
<li>Sidebar item 1</li>
<li>Sidebar item 2</li>
<li>Sidebar item 3</li>
</ul>
</div>
<div id="main-content" class="col-md-10">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<!-- View fullsize
We specify 2 columns for the sidebar and 10 columns for the content area. We want these values to add up to 12 because the grid system is 12 columns.
Grid classes apply to screen size we specify and larger. So when we apply the col-md-2 class to the sidebar element, it will take up 2 columns on medium and large screens.
Containers and Rows
A container is a class that defines the page size based on the viewport width. This is typically applied to one div element which contains the entire contents of the page.
Rows may be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Use rows (.row) to create horizontal groups of columns. -->
<body>
<div class="container">
<div class="row">Row 1</div>
<div class="row">Row 2</div>
</div>
</body>
<!-- Toggle Element Visibility
We can use the hidden-xx or visible-xx classes to toggle visibility of elements based on screen size:
Hide sidebar on small screens -->
<div id="side-bar" class="col-md-2 hidden-sm">
<!-- Show logo on large screens -->
<img alt="Logo" class="visible-lg" src="logo.png">
<!-- Glyphicons
These are icons bundled with Bootstrap that can be added to the page using a span element. A list of available glyphicons can be found here. We can insert these icons anywhere we would normally put in a span not just buttons (table headings, paragraphs, lists, etc). -->
<!-- We could make a download button more visually appealing with a glyphicon: -->
<button class="btn btn-lg btn-primary">
<span class="glyphicon glyphicon-download-alt"></span> Download
</button>
<!-- Customization
A common criticism of Bootstrap is that all sites end up looking the same. However, it is easy to customize the styles shipped with Bootstrap so we can have a unique look that conforms to company branding.
CHANGE DEFAULT FONT
Let's say we didn't like the default font-family of Helvetica, Arial, sans-serif and instead wanted to use Roboto from Google Fonts instead. Here's how we could do that: -->
<!-- Add CSS for Roboto font -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
Custom stylesheet added after Bootstrap CSS
body { font-family: 'Roboto', sans-serif; }
<!-- CHANGE BUTTON STYLE -->
<!-- The same process can be used to modify colors, button shapes, and anything else defined in the Bootstrap CSS file. -->
.btn { border-radius: 20px; }
.btn { border-radius: 0px; }
<!-- THEMES
We can download themes created by others to skin the look as well.
The Bootstrap project provides a theme that changes the appearance of buttons and other components for a less flat look. -->
<!-- Themes can be added by adding the appropriate CSS file after the Bootstrap CSS. -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Additional themes can be downloaded from sites like Bootswatch and WrapBootstrap. -->