Skip to content

Commit db6ef60

Browse files
buckyrobertsbuckyroberts
committed
Bootstrap.
1 parent eb5678b commit db6ef60

File tree

8 files changed

+383
-0
lines changed

8 files changed

+383
-0
lines changed

‎Bootstrap/001_template.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
14+
15+
</body>
16+
</html>

‎Bootstrap/002_gridSystem.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container-fluid">
14+
15+
<h1>3 column layout</h1>
16+
<div class="row">
17+
<div class="col-md-4" style="background-color: #FF9999">Left</div>
18+
<div class="col-md-4" style="background-color: #99CCFF">Middle</div>
19+
<div class="col-md-4" style="background-color: #00CC99">Right</div>
20+
</div>
21+
22+
</div>
23+
24+
</body>
25+
</html>

‎Bootstrap/003_textStyles.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
15+
<br>
16+
<!-- highlighting -->
17+
<p>You can highlight text with the
18+
<mark>mark tags</mark>
19+
if you want.
20+
</p>
21+
22+
<!-- quotes -->
23+
<blockquote>
24+
<p>Sometimes I wet the bed. On purpose.</p>
25+
<footer>My Grandpa</footer>
26+
</blockquote>
27+
28+
<!-- lists -->
29+
<h4>Things to do when you're bored</h4>
30+
<dl>
31+
<dt>Indoors</dt>
32+
<dd>- take a nap</dd>
33+
<dd>- watch Netflix for 8 hours</dd>
34+
<dt>Outdoors</dt>
35+
<dd>- go back inside</dd>
36+
</dl>
37+
38+
<!-- code -->
39+
<p>To set the users weight use <code>setUserWeight(374);</code> with an integer</p>
40+
41+
<!-- multi line code -->
42+
<p>For multiple lines of code, use the pre element:</p>
43+
<pre>
44+
for n in range(101):
45+
if(n % 4 is 0):
46+
print(n)
47+
</pre>
48+
49+
<!-- keyboard input -->
50+
<p>This is supposed to define keyboard input <kbd>Ctrl+Alt+Del</kbd></p>
51+
52+
<!-- contextual colors -->
53+
<h4>Provides build in text color classes for different events</h4>
54+
<p class="text-muted">This text is muted.</p>
55+
<p class="text-success">This text indicates success.</p>
56+
<p class="text-danger">This text represents danger.</p>
57+
58+
<!-- background colors -->
59+
<p class="bg-success">This text indicates success.</p>
60+
<p class="bg-danger">This text represents danger.</p>
61+
62+
</div>
63+
64+
</body>
65+
</html>
66+
67+
68+
69+
70+
71+
72+
73+
74+
75+
76+
77+
78+
79+
80+
81+
82+
83+
84+
85+

‎Bootstrap/004_tables.html‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
15+
<h2>Simple Table</h2>
16+
<table class="table">
17+
<thead>
18+
<tr>
19+
<th>Name</th>
20+
<th>Age</th>
21+
<th>Points</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
<tr>
26+
<td>Bucky Roberts</td>
27+
<td>74</td>
28+
<td>8,760</td>
29+
</tr>
30+
<tr>
31+
<td>Turd McGurd</td>
32+
<td>13</td>
33+
<td>5</td>
34+
</tr>
35+
<tr>
36+
<td>Chchchch Idunno</td>
37+
<td>18</td>
38+
<td>32</td>
39+
</tr>
40+
</tbody>
41+
</table>
42+
43+
<h2>Condensed Table</h2>
44+
<table class="table table-condensed">
45+
<thead>
46+
<tr>
47+
<th>Name</th>
48+
<th>Age</th>
49+
<th>Points</th>
50+
</tr>
51+
</thead>
52+
<tbody>
53+
<tr>
54+
<td>Bucky Roberts</td>
55+
<td>74</td>
56+
<td>8,760</td>
57+
</tr>
58+
<tr>
59+
<td>Turd McGurd</td>
60+
<td>13</td>
61+
<td>5</td>
62+
</tr>
63+
<tr>
64+
<td>Chchchch Idunno</td>
65+
<td>18</td>
66+
<td>32</td>
67+
</tr>
68+
</tbody>
69+
</table>
70+
71+
<h2>Striped Table</h2>
72+
<table class="table table-striped">
73+
<thead>
74+
<tr>
75+
<th>Name</th>
76+
<th>Age</th>
77+
<th>Points</th>
78+
</tr>
79+
</thead>
80+
<tbody>
81+
<tr>
82+
<td>Bucky Roberts</td>
83+
<td>74</td>
84+
<td>8,760</td>
85+
</tr>
86+
<tr>
87+
<td>Turd McGurd</td>
88+
<td>13</td>
89+
<td>5</td>
90+
</tr>
91+
<tr>
92+
<td>Chchchch Idunno</td>
93+
<td>18</td>
94+
<td>32</td>
95+
</tr>
96+
</tbody>
97+
</table>
98+
99+
</div>
100+
101+
</body>
102+
</html>

‎Bootstrap/005_imagesAndVideo.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<div class="container">
14+
15+
<!-- rounded corners -->
16+
<img src="https://www.thenewboston.com/photos/users/2/resized/2463a86fdf42a1681c66ba8fd6789f9d.jpg" class="img-rounded" width="230" height="230">
17+
18+
<!-- circle -->
19+
<img src="https://www.thenewboston.com/photos/users/2/resized/2463a86fdf42a1681c66ba8fd6789f9d.jpg" class="img-circle" width="230" height="230">
20+
21+
<!-- responsive vs non responsive -->
22+
<img src="https://www.thenewboston.com/photos/users/2/resized/b108418bc888d29763bacbc36d830518.jpg" class="img-responsive">
23+
<img src="https://www.thenewboston.com/photos/users/2/resized/b108418bc888d29763bacbc36d830518.jpg">
24+
25+
<!-- embed responsive videos -->
26+
<div class="embed-responsive embed-responsive-16by9">
27+
<iframe class="embed-responsive-item" src="http://www.youtube.com/embed/-u-j7uqU7sI"></iframe>
28+
</div>
29+
30+
</div>
31+
32+
</body>
33+
</html>

‎Bootstrap/006_navbar.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<nav class="navbar navbar-default">
14+
<div class="container-fluid">
15+
16+
<!-- Logo -->
17+
<div class="navbar-header">
18+
<a href="#" class="navbar-brand">THENEWBOSTON</a>
19+
</div>
20+
21+
<!-- Menu Items -->
22+
<div>
23+
<ul class="nav navbar-nav">
24+
<li class="active"><a href="#">Home</a></li>
25+
<li><a href="#">About</a></li>
26+
<li><a href="#">Contact</a></li>
27+
</ul>
28+
</div>
29+
30+
</div>
31+
</nav>
32+
33+
</body>
34+
</html>

‎Bootstrap/007_dropDownMenu.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<nav class="navbar navbar-inverse">
14+
<div class="container-fluid">
15+
16+
<!-- Logo -->
17+
<div class="navbar-header">
18+
<a href="#" class="navbar-brand">THENEWBOSTON</a>
19+
</div>
20+
21+
<!-- Menu Items -->
22+
<div>
23+
<ul class="nav navbar-nav">
24+
<li class="active"><a href="#">Home</a></li>
25+
<li><a href="#">About</a></li>
26+
<li><a href="#">Contact</a></li>
27+
28+
<!-- drop down menu -->
29+
<li class="dropdown">
30+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
31+
<ul class="dropdown-menu">
32+
<li><a href="#">Friends</a></li>
33+
<li><a href="#">Photos</a></li>
34+
<li><a href="#">Settings</a></li>
35+
</ul>
36+
</li>
37+
</ul>
38+
39+
<!--right align -->
40+
<ul class="nav navbar-nav navbar-right">
41+
<li><a href="#">Logout</a></li>
42+
</ul>
43+
44+
</div>
45+
46+
</div>
47+
</nav>
48+
49+
</body>
50+
</html>

‎Bootstrap/008_navbarToggleButton.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>thenewboston</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
</head>
11+
<body>
12+
13+
<nav class="navbar navbar-inverse">
14+
<div class="container-fluid">
15+
16+
<!-- Logo -->
17+
<div class="navbar-header">
18+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
19+
<span class="icon-bar"></span>
20+
<span class="icon-bar"></span>
21+
</button>
22+
<a href="#" class="navbar-brand">THENEWBOSTON</a>
23+
</div>
24+
25+
<!-- Menu Items -->
26+
<div class="collapse navbar-collapse" id="mainNavBar">
27+
<ul class="nav navbar-nav">
28+
<li class="active"><a href="#">Home</a></li>
29+
<li><a href="#">About</a></li>
30+
<li><a href="#">Contact</a></li>
31+
</ul>
32+
</div>
33+
34+
</div>
35+
</nav>
36+
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)