-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbootstrap.html
181 lines (177 loc) · 14.4 KB
/
bootstrap.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
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
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#hard">CSS is Hard</a></li>
<li><a href="#bs">Twitter Bootstrap</a></li>
<li><a href="#forms">Forms</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="hard">So what's hard about CSS?</h1>
<p>
You've seen quite a bit of CSS now; it all seems quite straightforward - you write some css, tweak it 'til it looks good and you're done! In theory this is exactly how CSS works and is why CSS is brilliant.
</p>
<div style="display: block;margin-left: auto; margin-right: auto; width: 200px;">
<img class="img-polaroid" src="images/cat_pic.jpg" width="200px">
</div>
<p>
Unfortunately, the realities are not quite so straightforward. Different browsers will render CSS with subtle differences. Take a look at the cat picture above. The styling is relatively simple - all we've done is add a border and a shadow. The following CSS will probably do this in your browser:
</p>
<div class="highlight"><pre><code class="css"><span class="nc">.img-polaroid</span> <span class="p">{</span>
<span class="k">padding</span><span class="o">:</span> <span class="m">4px</span><span class="p">;</span>
<span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">2</span><span class="p">);</span> <span class="c">/* transparent black border */</span>
<span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">3px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">1</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p>
However, to get this effect in all browsers you need the following:
</p>
<pre><code class="css"><span class="nc">.img-polaroid</span> <span class="p">{</span>
<span class="k">padding</span><span class="o">:</span> <span class="m">4px</span><span class="p">;</span>
<span class="k">background-color</span><span class="o">:</span> <span class="m">#fff</span><span class="p">;</span>
<span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#ccc</span><span class="p">;</span> <span class="c">/* grey border for browsers that can't do transparency */</span>
<span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">2</span><span class="p">);</span> <span class="c">/* put the transparency after for browsers that do */</span>
<span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">3px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">1</span><span class="p">);</span> <span class="c">/* some browers only understand webkit box shadow */</span>
<span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">3px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">1</span><span class="p">);</span> <span class="c">/* others need this */</span>
<span class="n">box</span><span class="o">-</span><span class="n">shadow</span><span class="o">:</span> <span class="m">0</span> <span class="m">1px</span> <span class="m">3px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">,</span> <span class="m">0</span><span class="o">.</span><span class="m">1</span><span class="p">);</span>
<span class="p">}</span>
</code></pre>
<p><strong>Just because your site looks good in Chrome, doesn’t mean it will look good in Internet Explorer.</strong> Making your site look good (or even presentable) in multiple browsers takes time, effort and experience.</p>
<h3 id="what_else_is_hard_about_css">What else is hard about CSS?</h3>
<p>About 5 years ago, ‘all’ you would have had to worry about is the cross-browser display issues. Since then, the mobile web has exploded and you have another (far more important) concern: how will your site look when viewed on a mobile?</p>
<p>Making webpages that look good when viewed at multiple different sizes is a whole new level of complexity.</p>
<h3 id="should_i_just_give_up_then">Should I just give up then?</h3>
<p>You might be the sort of person who relishes this sort of challenge - if so, great! If not, help is at hand </p>
<h2 id="bs">Twitter Bootstrap</h2>
<p>
<a hreg="http://getbootstrap.com">Twitter Bootstrap</a> is set of CSS (& Javascript) files, released by the makers of Twitter.
</p>
<p>Twitter Bootstrap is a set of <strong>ready-made CSS files</strong> that provide solutions to <strong>common presentation requirements</strong> in a <strong>cross-browser and responsive</strong> way. To make use of Twitter Bootstrap, you need to do two things:</p>
<ol>
<li>Link to the Twitter Bootstrap stylesheet in the <code>head</code> of your html page.</li>
<li>Attach the relevant Twitter Bootstrap class to you html element.</li>
</ol>
<p>
Now we'll create a mini project to demonstrate some of the features of Bootstrap.
</p>
<tasks>
<item title="Create a new folder for this mini project"></item>
<item title="Create a new index.html file in this folder"> Use Sublime text!</item>
<item title="Add the HTML boiletplate"> That's the DOCTYPE the <code><html>, <head> and <body></code> tags</item>
<item title="Browse to the bootstrap website"><a href="http://getbootstrap.com">Twitter Bootstrap</a></item>
<item title="Click Download Bootstrap"></item>
<item title="Unzip the downloaded file"></item>
<item title="Copy the 'dist' folder into your new website folder"></item>
<item title="Add a <link> tag to your head referencing the twitter bootstrap files"><code><link rel="stylesheet" href="dist/css/bootstrap.css"></code></item>
<item title="Add a <h1> into your site"></item>
<item title="Refresh your site in Chrome"> Verify that the fonts have changed - indicating that Bootstrap is loaded correctly.</item>
</tasks>
<p>
We'll now look at some of Bootstraps elements that come straight out of the box!
</p>
<p>
The bootstrap website comes with example code that we can copy into our own site. We'll do this now!
</p>
<tasks>
<item title="Browse to the bootstrap typography section"> Click CSS then Typography. Or <a href="http://getbootstrap.com/css/#type">find it here</a></item>
<item title="Find the section on lead body copy"></item>
<item title="Add a paragraph to your site with class='lead'"></item>
<item title="Find the section on addresses"></item>
<item title="Add an address to your mini site"> Look at how nicely formatted it is</item>
</tasks>
<h2 id="forms">Forms</h2>
<p>
Forms in HTML are notoriously difficult to style well, fortunately for us bootstrap takes care of this.
</p>
<p>
Form elements in HTML are all enclosed within a parent <code><form></code> tag.
</p>
<p>
Input tags live within forms and they allow us the user to input text into a website. They are commonly used for login forms and search bars.
</p>
<pre>
<form>
<label>Email</label>
<input type="text">
<label>Password</label>
<input type="password">
<input type="submit">
</form>
</pre>
<tasks>
<item title="Add the above form code to your project"></item>
<item title="Refresh the page in Chrome"> That's how bad standard forms look</item>
<item title="Browse to the Forms section of the bootstrap website"> It's under CSS then Forms, or <a href="http://getbootstrap.com/css/#forms">get it here</a></item>
<item title="Copy the code from bootstrap into your own site"> Look at how much nicer the form looks now</item>
</tasks>
<h2 id="Tables"></h2>
<p>
Much like <code><forms></code>, <code><table></code>s are also hard to make look nice using HTML.
</p>
<p>
Tables have one enclosing <code><table></code> tag and inside are made up of table rows <code><td></code> and table cells <code><td></code>
</p>
<pre>
<table>
<tr>
<td>Name</td>
<td>Email:</td>
</tr>
<tr>
<td>My Name</td>
<td>[email protected]</td>
</tr>
<tr>
<td>My Other name</td>
<td>[email protected]</td>
</tr>
</pre>
<tasks>
<item title="Copy the above table code into your project">Using sublime</item>
<item title="Refresh your page in Chrome"> It doesn't look too great</item>
<item title="Browse to the table section on the bootstrap website"></item>
<item title="Add a bootstrap table to your website"> Note how it places classes on the table elements to style them.</item>
<item title="Make a striped table"> Adding the class .table-striped to a table makes it striped!</item>
</tasks>
<h2>Other Elements</h2>
<p>
There are loads of HTML elements that bootstrap can style for us, including custom elements that we may want to use on our sites. Think navigation bars!
</p>
<tasks>
<item title="Explore the rest of bootstrap"> On the CSS page look at buttons and images!</item>
<item title="Look at the components page"> Can you get navigation bars working?</item>
<item title="Can you get alerts working?"></item>
</tasks>
</div>
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>