Full Stack Web Development Bootstrap(一)学习笔记

注：纯个人笔记。

下载bootstrap

    首先，将下载下来的bootstrap压缩包里的bootstrap-3.3.5-dist提取出来，放到项目文件夹中。在项目中建立一个index.html，在头部加入这几句，为了支持响应式设计。

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

    在把bootstrap中的css，js引入。

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

bootstrap相关资源

Bootstrap Home Page

Bootstrap typography

The 5 Most Popular Frontend Frameworks of 2014 Compared

Front-end Frameworks v2.5 and comparison

Bootstrap响应式设计和网格系统

自己设计的几个css类

.row-header{
margin:0px auto;
padding:0px auto;
}

.row-content {
margin:0px auto;
padding: 50px 0px 50px 0px;
border-bottom: 1px ridge;
min-height:400px;
}

.row-footer{
background-color: #AfAfAf;
margin:0px auto;
padding: 20px 0px 20px 0px;
}

.jumbotron {
padding:70px 30px 70px 30px;
margin:0px auto;
background: #7986CB ;
color:floralwhite;
}

address{
font-size:80%;
margin:0px;
color:#0f0f0f;
}

相关资源

Bootstrap Grid System

The Subtle Magic Behind Why the Bootstrap 3 Grid Works

What The Heck Is Responsive Web Design?

Beginner’s Guide to Responsive Web Design

The 2014 Guide to Responsive Web Design

Create a basic navigation bar

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>

Creating a responsive navigation bar

<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
</div>

Adding a Dropdown Menu to the Navigation Bar

<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> ... </ul>
</div>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Appetizers</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
<li><a href="#">Drinks</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li><a href="#">Lunch Buffet</a></li>
<li><a href="#">Weekend Brunch</a></li>
</ul>
</li>

Modifications to the CSS styles

`body{
padding:50px 0px 0px 0px;
z-index:0;
}

.navbar-inverse {
background: #303F9F;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #fff;
background: #1A237E;
}

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
color: #fff;
background: #1A237E;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a,
.navbar-inverse .navbar-nav .open .dropdown-menu {
background-color: #303F9F;
color:#eeeeee;
}

.navbar-inverse .navbar-nav .open .dropdown-menu> li> a:hover {
color:#000000;
}
`

Using Icon Fonts and Other CSS classes

<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap-social.css" rel="stylesheet">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion@food.net">confusion@food.net</a>
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>

字体相关资源

https://fortawesome.github.io/Font-Awesome/

bootstrap-social.css

http://lipis.github.io/bootstrap-social/.