AngularJS+Satellizer+Node.js+MongoDB->Instagram-04
Build an Instagram clone with AngularJS, Satellizer, Node.js and MongoDB
4.Bootstrapping UI
因为我们引用了 CDN 上的 Paper Bootstrap 主题，让我们来给 index.html 加一个导航组件。在 <div ng-view></div> 的前面添加下面的代码，让所有的页面都能共用。
<!-- lang: js -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<a href="/" class="navbar-brand"><i class="ion-images"></i> Instagram</a>
<li><a href="#/">Home</a></li>
<li><a href="#/login">Log in</a></li>
<li><a href="#/signup">Sign up</a></li>
<li><a ng-click="logout()" href="">Logout</a></li>
</ul>
</div>
</div>
在进一步开发之前，我们来处理一下 CSS 。这篇博客的目的不是 CSS 所以我不会在这里详细讲它。而且也没有多少需要重写的，基本上都被 Boostrap 实现了。如果你真的对 CSS 很感兴趣，这里有些我强烈建议阅读的文章: Medium 的 CSS 屌炸天， Don’t use IDs in CSS selectors? 和 The Sass Way。
client 里面新建文件夹叫做 css，然后在 css 文件夹里面新建文件 styles.css，把下面这段贴上去:
body {
background-color: #d8d8d8;
}
a {
color: #3f729b;
}
a:hover {
color: #1c5380;
}
.text-muted {
color: #90939a;
}
.navbar {
min-height: 50px;
border: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
}
.navbar-header {
float: left;
padding-left: 15px;
}
.navbar-brand {
height: 50px;
padding: 0 15px;
font-size: inherit;
line-height: 50px;
}
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding: 0 15px;
line-height: 50px;
}
.navbar-text {
margin-top: 10px;
margin-bottom: 10px;
}
.center-form {
width: 315px;
margin: 10% auto;
}
.signup-or-separator {
position: relative;
height: 29px;
margin: 5px 0;
text-align: center;
background: none;
}
.signup-or-separator hr {
width: 90%;
margin: -16px auto 10px auto;
border-top: 1px solid #dce0e0;
}
.signup-or-separator .text {
display: inline-block;
padding: 8px;
margin: 0;
background-color: #fff;
}
.has-feedback .form-control-feedback {
top: 0;
left: 0;
width: 46px;
height: 46px;
line-height: 46px;
color: #555;
}
[class^='ion-'] {
font-size: 1.2em;
}
.has-feedback .form-control {
padding-left: 42px;
}
.btn-instagram {
color: #fff;
background-color: #517fa4;
border: 1px solid #456c8c;
}
.btn-instagram:hover,
.btn-instagram:focus {
color: #fff;
background-color: #303030;
}
.media-object {
display: inline-block;
width: 32px;
height: 32px;
}
.media-heading {
display: block;
margin: 0;
color: #3f729b;
}
.media-heading:hover {
color: #1c5380;
}
.soften {
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
border: 0;
}
.thumbnail {
border: 0;
border-radius: 0;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .04),0 1px 5px rgba(0, 0, 0, .1);
}
最后在 index.html 的 <head> 节点中引用它:
<link rel="stylesheet" href="css/styles.css">