-
Notifications
You must be signed in to change notification settings - Fork 159
/
Copy pathfacebook.html
142 lines (132 loc) · 5.58 KB
/
facebook.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
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Facebook</title>
<!-- Bootstrap's CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/facebook.css" rel="stylesheet">
</head>
<body>
<!-- Our Facebook layout will go here. -->
<nav class="navbar navbar-fixed-top navbar-default">
<!-- ".container-fluid" expands to fill the entire browser view's width.
".container" will use the same width as the ".container" in the body,
which contains the three columns of content.
We want ".container" here so the navbar is the same width as the content.
Confused? Try switching between the two container classes once you have a
complete navbar to see the difference. -->
<div class="container">
<!-- This code is only active when viewing the site on mobile. We will not
cover responsive design, but we'll leave this in, as it's part of the
example code.-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Use a "home" glyphicon as a logo. -->
<a class="navbar-brand" href="#">
<!-- This is how you display a glyphicon. -->
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<!-- On mobile, this div is hidden by default. The user hits the button
in the `navbar-header` to see the content of the div.
On desktop, this div is visible all of the time. -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-left" role="search">
<!-- Left-aligned items. -->
<div class="input-group">
<input type="text" class="form-control fb-search" placeholder="Search Facebook">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<div class="nav navbar-nav navbar-right">
<!-- Right-aligned items -->
<div class="btn-toolbar pull-right" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default navbar-btn">
John
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default navbar-btn">
Home
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default navbar-btn">
<span class="glyphicon glyphicon-user"></span>
<span class="badge">5</span>
</button>
<button type="button" class="btn btn-default navbar-btn">
<span class="glyphicon glyphicon-comment"></span>
<span class="badge">1</span>
</button>
<button type="button" class="btn btn-default navbar-btn">
<span class="glyphicon glyphicon-globe"></span>
<span class="badge">3</span>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default navbar-btn">
<span class="glyphicon glyphicon-lock"></span>
</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle navbar-btn" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Log out...</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<!-- The container for our grid. The outermost grid must be placed within
a `container` or `container-fluid` class. (Meaning: If you nest a grid
within a grid, you should not define another `container`)
What's the difference between these two types of container? There's a
good answer here: http://stackoverflow.com/a/22263969 -->
<div class="container">
<!-- The row that contains the three main columns of the website. -->
<div class="row">
<!-- Left sidebar: A cell that spans 2 columns -->
<div class="col-md-2">
Left Sidebar
</div>
<!-- Main feed: A cell that spans 7 columns -->
<div class="col-md-7">
Main Feed
<div style="height: 99999px;">
</div>
</div>
<!-- Right sidebar: A cell that spans 3 columns -->
<div class="col-md-3">
Right Sidebar
</div>
</div>
</div>
<div class="chat-popup">
CHAT MENU
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>