-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmore_bootstrap.html
140 lines (128 loc) · 9.02 KB
/
more_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
<!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="#more">More Bootstrap</a></li>
<li><a href="#layout">Layout</a></li>
<li><a href="#nav">Navigation</a></li>
<li><a href="#alone">Finish it up</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="more">More Bootstrap</h1>
<p>
We'll now use bootstrap to create <a href="final.html">our website</a>, so we'll first need to include bootstrap on our site.
</p>
<tasks>
<item title="Open your website folder in Sublime"></item>
<item title="Open your index.html file in Sublime"></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="Refresh your site in Chrome"> Verify that the fonts have changed - indicating that Bootstrap is loaded correctly.</item>
</tasks>
<h2 id="layout">Bootstrap layout</h2>
<p>Bootstrap gives you several options on how to layout your page. To find out more take a look at the <a href="http://getbootstrap.com/css/#grid">Grid system docs</a> on the Bootstrap site. Some of these options will work out-of-the-box with <em>responsive design</em> - so that you can create a single html page which will look good whether viewed on a laptop, tablet or phone.</p>
<p>We’ll just look at a few of the most important layout options here:</p>
<h3 id="page_margins">Page margins</h3>
<p>Bootstrap makes it easy to center content on your page and provide sensible page margins. To do this make use of the <code>container</code> class:</p>
<div class="highlight"><pre><code class="html"><span class="nt"><body></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>
<span class="c"><!-- page content goes here --></span>
<span class="nt"></div></span>
<span class="nt"></body></span>
</code></pre></div>
<h3 id="columns">Columns</h3>
<p>Bootstrap works on a grid layout, with 12 columns (by default). You can create a column layout with the <code>row</code> and <code>span</code> classes:</p>
<div class="highlight"><pre><code class="html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">'row'</span><span class="nt">></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">'col-sm-4'</span><span class="nt">></span>
<span class="c"><!-- First column content --></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">'col-sm-4'</span><span class="nt">></span>
<span class="c"><!-- Second column content --></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">'col-sm-4'</span><span class="nt">></span>
<span class="c"><!-- Third column content --></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre></div>
<p>The number after the <code>col-sm-</code> determines how many of the 12 grid columns that page column takes up. The <code>sm</code> bit determines the width at which the columns will collapse on top of each other (which is useful when viewing your site on a phone). For more information see the <a href="http://getbootstrap.com/css/#grid">Grid system docs</a>.</p>
<tasks>
<item title="Delete any CSS you have in your index.html page"> We don't need it/nor do we need the old style tag</item>
<item title="Above the first <div class='product'> create a new <div class='container'>"></title>
<item title="Close the div container below the last product"></item>
<item title="Create a new <div class='row'> below that container"></item>
<item title="Add a class of col-md-4 to each of the div's containing the products"></item>
<item title="Above your H1 add a <div class='jumbotron'>"></item>
<item title="Close this </div> after your </button> tag closes"></item>
<item title="Below your opening jumbotron, add another <div class='container'>"> Close it above your </div> that closes your jumbotron</item>
</tasks>
<h2 id="nav">The navigation bar</h2>
<p>
If you haven't already looked at the navigaion bars that bootstrap provides us with, <a href="http://getbootstrap.com/components/#navbar">have a look now</a>
</p>
<p>
The navigation bar that we will use looks like this:
</p>
<pre>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.html">My Little Coding Shop</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Shop</a></li>
<li><a href="basket.html">Basket £<span id="total"></span></a></li>
</ul>
</div>
</div>
</pre>
<tasks>
<item title="Replace your unordered list <ul> with the navigation bar above"></item>
<item title="Refresh your site in Chrome"></item>
</tasks>
<h2 id="alone">You're on your own now</h2>
<p>
Your site should be almost complete now - apart from the JavaScript that we'll build in the later session. There are a few things that aren't quite right.
</p>
<p>
Remember the developer tools? Your task now is to use the developer tools inspecting <a href="final.html">the final site</a> to finalize your site.
</p>
<tasks>
<item title="Check the HTMl, is anything missing?"></item>
<item title="Check the CSS, do you have any?"> You'll need to make an external stylesheet and link it to your site. Then add the CSS rules from the final site.</item>
</tasks>
</div>
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>