Skip to content

Commit ecd5fd6

Browse files
buckyrobertsbuckyroberts
committed
More Bootstrap
1 parent d09d0e9 commit ecd5fd6

File tree

3 files changed

+199
-0
lines changed

3 files changed

+199
-0
lines changed

‎Bootstrap/login/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
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+
<h3>Log In Demo</h3>
16+
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#popUpWindow">Open Modal</button>
17+
18+
<div class="modal fade" id="popUpWindow">
19+
<div class="modal-dialog">
20+
<div class="modal-content">
21+
<div class="modal-header">
22+
<button type="button" class="close" data-dismiss="modal">&times;</button>
23+
<h3 class="modal-title">Log In</h3>
24+
</div>
25+
<div class="modal-body">
26+
<form role="form">
27+
<div class="form-group">
28+
<input type="email" class="form-control" placeholder="Email">
29+
</div>
30+
<div class="form-group">
31+
<input type="password" class="form-control" placeholder="Password">
32+
</div>
33+
</form>
34+
</div>
35+
<div class="modal-footer">
36+
<button class="btn btn-primary btn-block">Submit</button>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
</div>
43+
44+
</body>
45+
</html>

‎Bootstrap/sidebar/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
<!-- Admin layout -->
11+
<link rel="stylesheet" href="sidebar.css">
12+
</head>
13+
<body>
14+
15+
<div id="wrapper">
16+
17+
<!-- Sidebar -->
18+
<div id="sidebar-wrapper">
19+
<ul class="sidebar-nav">
20+
<li><a href="#">Account</a></li>
21+
<li><a href="#">Settings</a></li>
22+
<li><a href="#">Logout</a></li>
23+
</ul>
24+
</div>
25+
26+
<!-- Page Content -->
27+
<div id="page-content-wrapper">
28+
<div class="container-fluid">
29+
<div class="row">
30+
<div class="col-lg-12">
31+
<a href="#menu-toggle" class="btn btn-success" id="menu-toggle">Toggle Menu</a>
32+
<h1>Sidebar Layout</h1>
33+
<p>I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie.
34+
I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie.
35+
I love apple pie. I love apple pie. I love apple pie. I love apple pie. I love apple pie.
36+
I love apple pie. I love apple pie. I love apple pie. I love apple pie. </p>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
</div>
43+
44+
<!-- Menu Toggle Script -->
45+
<script>
46+
$("#menu-toggle").click(function (e) {
47+
//prevent default action (prevent clicking the link from going to URL)
48+
e.preventDefault();
49+
//adds and removes toggles class
50+
$("#wrapper").toggleClass("toggled");
51+
});
52+
</script>
53+
54+
</body>
55+
</html>

‎Bootstrap/sidebar/sidebar.css

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/* Everything */
2+
#wrapper {
3+
padding-left: 0;
4+
}
5+
6+
/* Sidebar */
7+
#sidebar-wrapper {
8+
z-index: 10;
9+
position: fixed;
10+
left: 250px;
11+
width: 0;
12+
height: 100%;
13+
margin-left: -250px;
14+
overflow-y: auto;
15+
background: #2C3E50;
16+
}
17+
18+
/* Main white area */
19+
#page-content-wrapper {
20+
width: 100%;
21+
position: absolute;
22+
padding: 15px;
23+
}
24+
25+
/* Start toggled classes - make space for menu on left when button clicked */
26+
#wrapper.toggled {
27+
padding-left: 250px;
28+
}
29+
30+
/* Change with of sidebar from 0 to 250px */
31+
#wrapper.toggled #sidebar-wrapper {
32+
width: 250px;
33+
}
34+
35+
/* Since we added left padding, we need to shrink the width by 250px */
36+
#wrapper.toggled #page-content-wrapper {
37+
position: absolute;
38+
margin-right: -250px;
39+
}
40+
41+
/* Sidebar styling - the entire ul list */
42+
.sidebar-nav {
43+
position: absolute;
44+
top: 0;
45+
width: 250px;
46+
margin: 0;
47+
padding: 0;
48+
list-style: none;
49+
}
50+
51+
.sidebar-nav li {
52+
text-indent: 20px;
53+
line-height: 40px;
54+
}
55+
56+
.sidebar-nav li a {
57+
display: block;
58+
text-decoration: none;
59+
color: #ddd;
60+
}
61+
62+
.sidebar-nav li a:hover {
63+
text-decoration: none;
64+
background: #16A085;
65+
}
66+
67+
.sidebar-nav li a:active,
68+
.sidebar-nav li a:focus {
69+
text-decoration: none;
70+
}
71+
72+
/* When the screen is less than 768px, hide the sidebar */
73+
@media (min-width: 768px) {
74+
#wrapper {
75+
padding-left: 250px;
76+
}
77+
78+
#wrapper.toggled {
79+
padding-left: 0;
80+
}
81+
82+
#sidebar-wrapper {
83+
width: 250px;
84+
}
85+
86+
#wrapper.toggled #sidebar-wrapper {
87+
width: 0;
88+
}
89+
90+
#page-content-wrapper {
91+
padding: 20px;
92+
position: relative;
93+
}
94+
95+
#wrapper.toggled #page-content-wrapper {
96+
position: relative;
97+
margin-right: 0;
98+
}
99+
}

0 commit comments

Comments
 (0)