①BS学习的基础
第一个例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first bootstrap page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>column 2</h3>
<p>jin xue ling</p>
</div>
<div class="col-sm-4">
<h3>column 2</h3>
<p>jin xue ling</p>
</div>
<div class="col-sm-4">
<h3>column 3</h3>
<p>jin xue ling</p>
</div>
</div>
</div>
</div>
</body>
</html>
1.应用BS
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
2.设置编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
3.mobile-first 多端口设备
<meta name="viewport" content="width=device-width",initial-scale=1">
4.基本的BS页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html
二、Grid Basic
Grid class
xs（for phone）
sm（for tablets）
md（for desktops）
lg（for large desktops）
<div class="col-*-*"></div>
三、Typepography
More Typography Classes
From <http://www.w3schools.com/bootstrap/bootstrap_typography.asp>
四、table
Test Yourself with Exercises!
From <http://www.w3schools.com/bootstrap/bootstrap_tables.asp>
五、imgs
Responsive Images
From <http://www.w3schools.com/bootstrap/bootstrap_images.asp>
Test Yourself with Exercises!
From <http://www.w3schools.com/bootstrap/bootstrap_images.asp>
六、Jumbotron
Example Page Header
From <http://www.w3schools.com/bootstrap/bootstrap_jumbotron_header.asp>
七、Wells
八、Alerts
Alerts
From <http://www.w3schools.com/bootstrap/bootstrap_alerts.asp>
九、buttons
Button Styles
From <http://www.w3schools.com/bootstrap/bootstrap_buttons.asp>
十、button groups
Button Groups
From <http://www.w3schools.com/bootstrap/bootstrap_button_groups.asp>
十二、Glyphicons
Test Yourself with Exercises!
From <http://www.w3schools.com/bootstrap/bootstrap_glyphicons.asp>
十三、Badges/Labels
Badges
Badges are numerical indicators of how many items are associated with a link:
From <http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp>
Labels
Labels are used to provide additional information about something
From <http://www.w3schools.com/bootstrap/bootstrap_badges_labels.asp>
十四、progress Bars
Test Yourself with Exercises!
From <http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp>
十五、Pagination
Basic Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page
From <http://www.w3schools.com/bootstrap/bootstrap_pagination.asp>
十六、Pager
Pager is also a form of pagination (as described in the previous chapter).
Pager provides previous and next buttons (links).
From <http://www.w3schools.com/bootstrap/bootstrap_pager.asp>
十七、List groups
Test Yourself with Exercises!
From <http://www.w3schools.com/bootstrap/bootstrap_list_groups.asp>
十八、Panels
Test Yourself with Exercises!
From <http://www.w3schools.com/bootstrap/bootstrap_panels.asp>
十九、Dropdowns
The .divider class is used to separate links inside the dropdown menu:
From <http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_dropdown-divider&stacked=h>
二十、Collapse
Basic Collapsible
Collapsibles are useful when you want to hide and show large amount of content:
From <http://www.w3schools.com/bootstrap/bootstrap_collapse.asp>
二十一、Tabs/Pills
Toggleable / Dynamic Pills
The same code applies to pills; only change the data-toggle attribute to data-toggle="pill"
From <http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp>
二十二、nav bars
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:
From <http://www.w3schools.com/bootstrap/bootstrap_navbar.asp>
二十三、Forms
Bootstrap's Default Settings
Form controls automatically receive some global styling with Bootstrap:
From <http://www.w3schools.com/bootstrap/bootstrap_forms.asp>
二十四、input
Supported Form Controls
Bootstrap supports the following form controls:
- input
- textarea
- checkbox
- radio
From <http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp>
二十五、input2
Bootstrap Form Inputs (more)
From <http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp>
二十六、input sizing
Bootstrap Input Sizing
From <http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp>
二十七、Carousel
Bootstrap Carousel Plugin
From <http://www.w3schools.com/bootstrap/bootstrap_carousel.asp>
二十七、Modal
Bootstrap Modal Plugin
From <http://www.w3schools.com/bootstrap/bootstrap_modal.asp>
二十八、Tooltip plugin
Bootstrap Tooltip Plugin
From <http://www.w3schools.com/bootstrap/bootstrap_tooltip.asp>
二十九、Popover Plugin
Bootstrap Popover Plugin
From <http://www.w3schools.com/bootstrap/bootstrap_popover.asp>
三十、Scrollspy
The Scrollspy Plugin
The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position.
From <http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp>
三十一、affix Plugin(advance)
Bootstrap Affix Plugin (Advanced)
From <http://www.w3schools.com/bootstrap/bootstrap_affix.asp>
②bs的实例
1.个人主页
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap theme simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.bg-1{
background-color:#1abc9c;/* Green*/
color:#ffffff;
}
.bg-2{
background-color:#474e5d;/*Dark Blue*/
color:#ffffff;
}
.bg-3{
background-color:#ffffff;/*White*/
color:#555555;
}
.container-fluid{
padding-top:70px;
padding-bottom:70px;
}
.navbar{
padding-top:15px;
padding-bottom:15px;
border:0;
border-radius:0;
margin-bottom:0;
font-size:12px;
letter-spacing:5px;
}
.navbar-nav li a:hover{
color:#1abc9c !important;
}
.bg-4{
background-color:#2f2f2f;
color:#ffffff;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
<!--------------------------------------------------------->
<div class="container-fluid bg-1 text-center">
<h3>Who am I?</h3>
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="Bird">
<h3>I'm an adventurer</h3>
</div>
<!------------------------------------------------------------>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-flluid bg-3 text-center">
<h3> Where To Find Me?</h3>
<p>Lorem ipsum..</p>
</div>
<div class="container-fluid bg-2 text-center">
<h3>What Am I?</h3>
<p>Lorem ipsum..</p>
<a href="#" class="btn btn-default btn-lg"><span class="glyphicon glyphicon-search"></span>Search</a>
</div>
<div class="container-fluid bg-3 text-center">
<h3>Where To Find Me?</h3>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds1.jpg" class="img-responsive" style="100%" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds2.jpg" class="img-responsive" style="100%" alt="Image">
</div>
<div class="col-sm-4">
<p>Lorem ipsum..</p>
<img src="birds3.jpg" class="img-responsive" style="100%" alt="Image">
</div>
<div>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By<a href="http://www.w3schools.com">www.w3schools.com</a></p>
</footer>
</body>
</html>
2.乐队
<DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.container{
padding:80px 120px;
}
.person{
border:10px solid transparent;
margin-bottom:25px;
80%;
height:80%;
opacity:0.7;
}
.person:hover{
border-corlor:#f1f1f1;
}
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max- 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}
.bg-1{
background:#2d2d30;
color:#bdbdbd;
}
.bg-1 h3{
color:#fff;
}
.bg-1 p{
font-style:italic;
}
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
.nav-tabs li a {
color: #777;
}
#googleMap {
100%; /* Span the entire width of the screen */
height: 400px; /* Set the height to 400 pixels */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Change the color of the map to black and white * /
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo" class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo2" class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo3" class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member since 2005</p>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago -A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess,we had the best time.</p>
</div>
</div>
<!--left and right controls-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="bg-1">
<div class="container">
<h3 class="text-center">tour dates</h3>
<p class="text-center">Lorem ipsum we'll paly you some music.<br>Remember to book your tickets!</p>
<ul class="list-group">
<li class="list-group-item">Setember <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">Setember <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">Setember <span class="badge">3</span></li>
</ul>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<!--used to open the Modal-->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!--Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&×</button>
<h4><span class="glyphicon glyphicon-lock"></span>
Tickets</h4>
<div class="modal-body">
<form role="form">
<div class="form-group">
<lable for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>Ticets,$23 per person</label>
<input type="number" class="form-control" id="psw" placeholder="How many?">
</div>
<div class="form-group">
<lable for="usrname"><span class="glyphicon glyphicon-user"></span>send to</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>Candel</button>
<p>Need<a href="#">help?</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
<!---------------------add a panel tab------------->
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Mike Ross, Manager</h2>
<p>Man,we've been on the road for some time now.Looking forward to lorem ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
</div>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-------add nav bar---------->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
<!---------------------add a footer--------------->
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
</style>S
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="http://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>
3.公司主页
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap theme Company</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.jumbotron{
background-color:#f4511e;/*Orange*/
color:#ffffff;
padding:100px 25px;
}
.container-fluid{
padding:60px 50px;
}
.bg-grey{
background-color:#f6f6f6;
}
.logo{
font-size:200px;
}
@media screen and(max-768px){
.col-sm-4{
text-align:center;
margin:25px 0;
}
}
.logo-small{
color:#f4511e;
font-size:50px;
}
.logo{
color:#f4511e;
font-size:200px;
}
.thumbnail{
padding:0 0 15px 0;
border:none;
border-radius:0;
}
.thumbnail img{
100%;
height:100%;
margin-bottom:10px;
}
.carousel-control.right,.carousel-control.left{
background-image:none;
color:#f4511e;
}
.carousel-indicators li{
border-color:#f4511e;
}
.carousel-indicators li.active{
background-color:#f4511e;
}
.item h4{
font-size:19px;
line-height:1.375em;
font-weight:400;
font-style:italic;
margin:70px 0;
}
.item span{
font-style:normal;
}
.panel{
border:1px solid #f4511e;
border-radius:0;
transition:box-shadow 0.5s;
}
.panel:hover{
box-shadow:5px 0px 40px rgba(0,0,0,.2);
}
.panel-foot .btn:hover{
border:1px solid #f4511e;
background-color:#fff !important;
color:#f4511e;
}
.panel-heading{
color:#fff !important;
background-color:#f45ee !important;
padding:25px;
border-bottom:1px solid transparent;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
.panel-footer{
background-color:#fff !important;
}
.panel-footer h3{
background-color:#fff !important;
}
.panel-footer h3{
font-size:32px;
}
.panel-footer h4{
color:#aaa;
font-size:14px;
}
.panel-footer .btn{
margin:15px 0;
background-color:#f4511e;
color:#fff;
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Company</h1>
<p>We specialize in blablabla</P>
<form class="form-inline">
<input type="email" class="form-control" size="50" placeholder="Email Address">
<button type="button" class="btn btn-danger">Subscribe</button>
</form>
</div>
<!------------------------------------------------------------------------>
<div class="container-fluid">
<h2>About Company Page</h2>
<h4>Lorem ipsum..</h4>
<p>Lorem ipsum..</p>
<button class="btn btn-default btn-lg">Get in touch</button>
<div class="col-sm-4">
<span class="glyphicon glyphicon-signal logo"></span>
</div>
</div>
<div class="container-fluid bg-grey">
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-globe logo"></span>
</div>
<div class="col-sm-8">
<h2>Our Values</h2>
<h4><strong>MISSION:</strong>Our mission lorem ipsum..</h4>
<p><strong>VISION:</strong>Our vision Lorem ipsum..</p>
</div>
</div>
</div>
<!------------------------------------------------------------------->
<div class="container-fluid text-center">
<h2>SERVICES</h2>
<h4>What we offer</h4>
<br>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-off logo-small"></span>
<h4>POWER</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-heart logo-small"></span>
<h4>LOVE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-lock logo-small"></span>
<h4>JOB DONE</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<span class="glyphicon glyphicon-leaf logo-small"></span>
<h4>GREEN</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-certificate logo-small"></span>
<h4>CERTIFIED</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-wrench logo-small"></span>
<h4>HARD WORK</h4>
<p>Lorem ipsum dolor sit amet..</p>
</div>
</div>
</div>
<!----------------------------------------------------------->
<div class="container-fluid text-center bg-grey>
<h2>Portfolio</h2>
<h4>What we have created</h4>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><Strong>Paris</strong></P>
<p>Yes,we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>We built San Francisco</p>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------->
<h2 class="text-center">What our customers say</h2>
<div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!--Wrapper for slides-->
<div class="carousel-inner role="listbox">
<div class="item active">
<h4>"This company is the best. I am so happy with the result!"
<br><span style="font-style:normal;">Michael Roe, Vice President,
Comment Box</span></h4>
</div>
<div class="item">
<h4>"One word... WOW!!"<br><span style="font-style:normal;">John
Doe,Salesman,Rep Inc</span></h4>
</div>
<div class="item">
<h4>"Could I.. BE any more happy with this company?"<br><span
style="font-stye:normal;">
Chandler Bing,Actor,FriendsAlot</span></h4>
</div>
</div>
<!-----left and right controls-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid">
<div class="text-center">
<h2>Pricing</h2>
<h4>Choose a payment plan that works for you</h4>
</div>
<div class="row">
<!--------------------------------------->
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p><strong>20</strong>Lorem</p>
<p><strong>15</strong>Ipsum</p>
<p><strong>5</strong>Dolor</p>
<p><strong>2</strong>Sit</p>
<p><strong>Endless</strong>Amet</p>
</div>
<div class="panel-flooter">
<h3>$19</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<!---------------------------------------------->
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Pro</h1>
</div>
<div class="panel-body">
<p><strong>50</strong>Lorem</p>
<p><strong>25</strong>Ipsum</p>
<p><strong>10</strong>Dolor</p>
<p><strong>2</strong>Sit</p>
<p><strong>Endless</strong>Amet</p>
</div>
<div class="panel-flooter">
<h3>$29</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<!-------------------------------------------------->
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h1>Premium</h1>
</div>
<div class="panel-body">
<p><strong>100</strong>Lorem</p>
<p><strong>50</strong>Ipsum</p>
<p><strong>25</strong>Dolor</p>
<p><strong>10</strong>Sit</p>
<p><strong>Endless</strong>Amet</p>
</div>
<div class="panel-flooter">
<h3>$49</h3>
<h4>per month</h4>
<button class="btn btn-lg">Sign Up</button>
</div>
</div>
</div>
<!----------------------------------------------------------------->
</div>
</div>
<!------------------------------------------------------------------------------->
<div class="container-fluid bg-grey">
<h2 class="text-center">CONTACT</h2>
<div class="row">
<div class="col-sm-5">
<p>Contact us and we'll get back to you within 24 hours.</p>
<p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span> myemail@something.com</p>
</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name"
type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email"
type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments"
placeholder="Comment" rows="5"></textarea><br>
<div class="row">
<div class="col-sm-12 form-group">
<button class="btn btn-default pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
<div id="googleMap" style="height:400px;100%;"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap Theme Made By<a href="http://www.w3schools.com">www.w3schools.com</a></p>
</footer>
</body>
</html>
<DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Theme The Band</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.container{
padding:80px 120px;
}
.person{
border:10px solid transparent;
margin-bottom:25px;
80%;
height:80%;
opacity:0.7;
}
.person:hover{
border-corlor:#f1f1f1;
}
.carousel-inner img {
-webkit-filter: grayscale(90%);
filter: grayscale(90%); /* make all photos black and white */
100%; /* Set width to 100% */
margin: auto;
}
.carousel-caption h3 {
color: #fff !important;
}
@media (max- 600px) {
.carousel-caption {
display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
}
}
.bg-1{
background:#2d2d30;
color:#bdbdbd;
}
.bg-1 h3{
color:#fff;
}
.bg-1 p{
font-style:italic;
}
/* Remove rounded borders from list */
.list-group-item:first-child {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.list-group-item:last-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* Remove border and add padding to thumbnails */
.thumbnail {
padding: 0 0 15px 0;
border: none;
border-radius: 0;
}
.thumbnail p {
margin-top: 15px;
color: #555;
}
/* Black buttons with extra padding and without rounded borders */
.btn {
padding: 10px 20px;
background-color: #333;
color: #f1f1f1;
border-radius: 0;
transition: .2s;
}
/* On hover, the color of .btn will transition to white with black text */
.btn:hover, .btn:focus {
border: 1px solid #333;
background-color: #fff;
color: #000;
}
.modal-header, h4, .close {
background-color: #333;
color: #fff !important;
text-align: center;
font-size: 30px;
}
.modal-header, .modal-body {
padding: 40px 50px;
}
.nav-tabs li a {
color: #777;
}
#googleMap {
100%; /* Span the entire width of the screen */
height: 400px; /* Set the height to 400 pixels */
-webkit-filter: grayscale(100%);
filter: grayscale(100%); /* Change the color of the map to black and white * /
}
/* Add a dark background color with a little bit see-through */
.navbar {
margin-bottom: 0;
background-color: #2d2d30;
border: 0;
font-size: 11px !important;
letter-spacing: 4px;
opacity:0.9;
}
/* Add a gray color to all navbar links */
.navbar li a, .navbar .navbar-brand {
color: #d5d5d5 !important;
}
/* On hover, the links will turn white */
.navbar-nav li a:hover {
color: #fff !important;
}
/* The active link */
.navbar-nav li.active a {
color: #fff !important;
background-color:#29292c !important;
}
/* Remove border color from the collapsible button */
.navbar-default .navbar-toggle {
border-color: transparent;
}
/* Dropdown */
.open .dropdown-toggle {
color: #fff ;
background-color: #555 !important;
}
/* Dropdown links */
.dropdown-menu li a {
color: #000 !important;
}
/* On hover, the dropdown links will turn red */
.dropdown-menu li a:hover {
background-color: red !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container text-center">
<h3>THE BAND</h3>
<p><em>We love music!</em></p>
<p>We have created a fictional band website. Lorem ipsum..</p>
<br>
<div class="row">
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo" class="collapse">
<p>Guitarist and Lead Vocalist</p>
<p>Loves long walks on the beach</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo2" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo2" class="collapse">
<p>Drummer</p>
<p>Loves drummin'</p>
<p>Member since 1988</p>
</div>
</div>
<div class="col-sm-4">
<p class="text-center"><strong>Name</strong></p><br>
<a href="#demo3" data-toggle="collapse">
<img src="bandmember.jpg" class="img-circle person" alt="Random Name" width="255" height="255">
</a>
<div id="demo3" class="collapse">
<p>Bass player</p>
<p>Loves math</p>
<p>Member since 2005</p>
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!--indicators-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!--wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago -A night we won't forget.</p>
</div>
</div>
<div class="item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>LA</h3>
<p>Even though the traffic was a mess,we had the best time.</p>
</div>
</div>
<!--left and right controls-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<div class="bg-1">
<div class="container">
<h3 class="text-center">tour dates</h3>
<p class="text-center">Lorem ipsum we'll paly you some music.<br>Remember to book your tickets!</p>
<ul class="list-group">
<li class="list-group-item">Setember <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">Setember <span class="label label-danger">Sold Out!</span></li>
<li class="list-group-item">Setember <span class="badge">3</span></li>
</ul>
<div class="row text-center">
<div class="col-sm-4">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Paris</strong></p>
<p>Fri. 27 November 2015</p>
<!--used to open the Modal-->
<button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="newyork.jpg" alt="New York">
<p><strong>New York</strong></p>
<p>Sat. 28 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="sanfran.jpg" alt="San Francisco">
<p><strong>San Francisco</strong></p>
<p>Sun. 29 November 2015</p>
<button class="btn">Buy Tickets</button>
</div>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!--Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&×</button>
<h4><span class="glyphicon glyphicon-lock"></span>
Tickets</h4>
<div class="modal-body">
<form role="form">
<div class="form-group">
<lable for="psw"><span class="glyphicon glyphicon-shopping-cart"></span>Ticets,$23 per person</label>
<input type="number" class="form-control" id="psw" placeholder="How many?">
</div>
<div class="form-group">
<lable for="usrname"><span class="glyphicon glyphicon-user"></span>send to</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter email">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>Candel</button>
<p>Need<a href="#">help?</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h3 class="text-center">Contact</h3>
<p class="text-center"><em>We love our fans!</em></p>
<div class="row test">
<div class="col-md-4">
<p>Fan? Drop a note.</p>
<p><span class="glyphicon glyphicon-map-marker"></span>Chicago, US</p>
<p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
<p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-sm-6 form-group">
<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
</div>
<div class="col-sm-6 form-group">
<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
</div>
</div>
<textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
<div class="row">
<div class="col-md-12 form-group">
<button class="btn pull-right" type="submit">Send</button>
</div>
</div>
</div>
</div>
</div>
<!---------------------add a panel tab------------->
<h3 class="text-center">From The Blog</h3>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
<li><a data-toggle="tab" href="#menu1">Chandler</a></li>
<li><a data-toggle="tab" href="#menu2">Peter</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h2>Mike Ross, Manager</h2>
<p>Man,we've been on the road for some time now.Looking forward to lorem ipsum.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
<div id="menu2" class="tab-pane fade">
<h2>Chandler Bing, Guitarist</h2>
<p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
</div>
</div>
<div id="googleMap"></div>
<!-- Add Google Maps -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(41.878114, -87.629798);
function initialize() {
var mapProp = {
center:myCenter,
zoom:12,
scrollwheel:false,
draggable:false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-------add nav bar---------->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">HOME</a></li>
<li><a href="#band">BAND</a></li>
<li><a href="#tour">TOUR</a></li>
<li><a href="#contact">CONTACT</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Merchandise</a></li>
<li><a href="#">Extras</a></li>
<li><a href="#">Media</a></li>
</ul>
</li>
<li><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</nav>
<!---------------------add a footer--------------->
<style>
/* Add a dark background color to the footer */
footer {
background-color: #2d2d30;
color: #f5f5f5;
padding: 32px;
}
footer a {
color: #f5f5f5;
}
footer a:hover {
color: #777;
text-decoration: none;
}
</style>S
<footer class="text-center">
<a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
<span class="glyphicon glyphicon-chevron-up"></span>
</a><br><br>
<p>Bootstrap Theme Made By <a href="http://www.w3schools.com" data-toggle="tooltip" title="Visit w3schools">www.w3schools.com</a></p>
</footer>
<ul id="component_0__0__6612" class="bigimg">
<li id="p22876687" class="line1">
<a target="_blank" href="http://product.dangdang.com/22876687.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&pos=22876687_0_1_q" title=" 国际大奖小说——无字书图书馆 "><img alt=" 国际大奖小说——无字书图书馆 " src="http://img3x7.ddimg.cn/64/31/22876687-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&pos=22876687_0_1_q" href="http://product.dangdang.com/22876687.html" title=" 国际大奖小说——无字书图书馆 "> 国际大奖小说——无字书<font class="skcolor_ljg">图书</font>馆 </a></p><p class="detail">你知道吗，书也有生命！如果人人都不读书，你知道会有什么后果吗？一个荒废已久的图书馆，堆满了无字天书……是书被下了魔咒，还是人为所致呢？想解开它其中的秘密吗？带你走进无字书图书馆，寻找尘封已久的答案……★ 西班牙安徒生文学奖★胡里奥国际童书大奖提名奖★西班牙年度童书畅销榜冠军★世界各国儿童图书馆必备图书扪心自问，你有多久没读过一本书了？！</p><p class="price"> <span class="search_now_price">¥11.50</span><a style="text-decoration:none;" class="search_discount">定价：</a><span class="search_pre_price">¥16.00</span><span class="search_discount"> (7.19折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style=" 100%;"></span></span><a ddclick="act=click_review_count&pos=22876687_0_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/22876687.html#comment">12359条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span>（西）<a title="（西）法布拉　著，李竞阳　译" name="itemlist-author" href="/?key2=法布拉&medium=01&category_path=01.00.00.00.00.00">法布拉</a>　著，<a title="（西）法布拉　著，李竞阳　译" name="itemlist-author" href="/?key2=李竞阳&medium=01&category_path=01.00.00.00.00.00">李竞阳</a>　译</span><span> /2012-08-01</span><span> /<a title="新蕾出版社" name="P_cbs" href="/?key=&key3=%D0%C2%C0%D9%B3%F6%B0%E6%C9%E7&medium=01&category_path=01.00.00.00.00.00">新蕾出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&pos=22876687_0_1_q" href="javascript:AddToShoppingCart(22876687)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&pos=22876687_0_1_q" href="javascript:showMsgBox('lcase22876687','22876687','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase22876687" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p> </li>
<li id="p23483777" class="line2">
<a target="_blank" href="http://product.dangdang.com/23483777.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&pos=23483777_1_1_q" title=" 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀图书 汇集国内原创知名作家力作 ) "><img alt=" 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀图书 汇集国内原创知名作家力作 ) " src="http://img3x7.ddimg.cn/86/25/23483777-1_b_0.jpg" data-original="http://img3x7.ddimg.cn/86/25/23483777-1_b_0.jpg" style="display: block;"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&pos=23483777_1_1_q" href="http://product.dangdang.com/23483777.html" title=" 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀图书 汇集国内原创知名作家力作 ) "> 全国优秀儿童文学奖获奖作家书系·我不是好学生(国家出版基金资助的优秀<font class="skcolor_ljg">图书</font> 汇集国内原创知名作家力作 ) </a></p><p class="detail">★中国儿童文学奖“全国优秀儿童文学奖”得主经典力作★享受精品儿童文学蕴含的内在品质★感受优秀儿童文学散发的独特魅力</p><p class="price"> <span class="search_now_price">¥13.00</span><a style="text-decoration:none;" class="search_discount">定价：</a><span class="search_pre_price">¥17.00</span><span class="search_discount"> (7.65折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style=" 100%;"></span></span><a ddclick="act=click_review_count&pos=23483777_1_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23483777.html#comment">84条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="孙卫卫　著" name="itemlist-author" href="/?key2=孙卫卫&medium=01&category_path=01.00.00.00.00.00">孙卫卫</a>　著</span><span> /2014-06-01</span><span> /<a title="长江少年儿童出版社" name="P_cbs" href="/?key=&key3=%B3%A4%BD%AD%C9%D9%C4%EA%B6%F9%CD%AF%B3%F6%B0%E6%C9%E7&medium=01&category_path=01.00.00.00.00.00">长江少年儿童出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&pos=23483777_1_1_q" href="javascript:AddToShoppingCart(23483777)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&pos=23483777_1_1_q" href="javascript:showMsgBox('lcase23483777','23483777','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23483777" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p> </li>
<li id="p23470043" class="line3">
<a target="_blank" href="http://product.dangdang.com/23470043.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&pos=23470043_2_1_q" title=" 小水的除夕 2014中国好书榜获奖图书 "><img alt=" 小水的除夕 2014中国好书榜获奖图书 " src="http://img3x3.ddimg.cn/14/18/23470043-1_b_1.jpg" data-original="http://img3x3.ddimg.cn/14/18/23470043-1_b_1.jpg" style="display: block;"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&pos=23470043_2_1_q" href="http://product.dangdang.com/23470043.html" title=" 小水的除夕 2014中国好书榜获奖图书 "> 小水的除夕 2014中国好书榜获奖<font class="skcolor_ljg">图书</font> </a></p><p class="detail"></p><p class="price"> <span class="search_now_price">¥10.50</span><a style="text-decoration:none;" class="search_discount">定价：</a><span class="search_pre_price">¥18.00</span><span class="search_discount"> (5.84折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style=" 100%;"></span></span><a ddclick="act=click_review_count&pos=23470043_2_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23470043.html#comment">6257条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="祁智　著" name="itemlist-author" href="/?key2=祁智&medium=01&category_path=01.00.00.00.00.00">祁智</a>　著</span><span> /2014-03-01</span><span> /<a title="江苏少年儿童出版社" name="P_cbs" href="/?key=&key3=%BD%AD%CB%D5%C9%D9%C4%EA%B6%F9%CD%AF%B3%F6%B0%E6%C9%E7&medium=01&category_path=01.00.00.00.00.00">江苏少年儿童出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&pos=23470043_2_1_q" href="javascript:AddToShoppingCart(23470043)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&pos=23470043_2_1_q" href="javascript:showMsgBox('lcase23470043','23470043','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23470043" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p> </li>
<li id="p23427463" class="line4">
<a target="_blank" href="http://product.dangdang.com/23427463.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&pos=23427463_3_1_q" title=" 小屁孩日记-为什么都是我的错（修订本）（注音全彩美绘，系列畅销150万册，被全国多所小学选为课外阅读图书） "><img alt=" 小屁孩日记-为什么都是我的错（修订本）（注音全彩美绘，系列畅销150万册，被全国多所小学选为课外阅读图书） " src="images/model/guan/url_none.png" data-original="http://img3x3.ddimg.cn/4/25/23427463-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&pos=23427463_3_1_q" href="http://product.dangdang.com/23427463.html" title=" 小屁孩日记-为什么都是我的错（修订本）（注音全彩美绘，系列畅销150万册，被全国多所小学选为课外阅读图书） （注音全彩美绘，系列畅销170万册，被全国多所小学选为课外阅读图书。） "> 小屁孩日记-为什么都是我的错（修订本）（注音全彩美绘，系列畅销150万册，被全国多所小学选为课外阅读<font class="skcolor_ljg">图书</font>） （注音全彩美绘，系列畅销170万册，被全国多所小学选为课外阅读图书。） </a></p><p class="detail">小屁孩的小屁事，让你笑翻天！小屁孩的快乐主义：开心有理，快乐无敌！</p><p class="price"> <span class="search_now_price">¥13.20</span><a style="text-decoration:none;" class="search_discount">定价：</a><span class="search_pre_price">¥18.00</span><span class="search_discount"> (7.34折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style=" 100%;"></span></span><a ddclick="act=click_review_count&pos=23427463_3_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23427463.html#comment">393条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="黄宇 著" name="itemlist-author" href="/?key2=黄宇&medium=01&category_path=01.00.00.00.00.00">黄宇</a> 著</span><span> /2014-01-01</span><span> /<a title="春风文艺出版社" name="P_cbs" href="/?key=&key3=%B4%BA%B7%E7%CE%C4%D2%D5%B3%F6%B0%E6%C9%E7&medium=01&category_path=01.00.00.00.00.00">春风文艺出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&pos=23427463_3_1_q" href="javascript:AddToShoppingCart(23427463)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&pos=23427463_3_1_q" href="javascript:showMsgBox('lcase23427463','23427463','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23427463" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p> </li>
<li id="p23621498" class="line5">
<a target="_blank" href="http://product.dangdang.com/23621498.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&pos=23621498_4_1_q" title=" 图说天下学生版 地理百科 地球奇幻之旅（中国卷)（全3卷） "><img alt=" 图说天下学生版 地理百科 地球奇幻之旅（中国卷)（全3卷） " src="images/model/guan/url_none.png" data-original="http://img3x8.ddimg.cn/98/32/23621498-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&pos=23621498_4_1_q" href="http://product.dangdang.com/23621498.html" title=" 图说天下学生版 地理百科 地球奇幻之旅（中国卷)（全3卷） 地理不再神秘，科普不再无趣，专为孩子量身打造“中国国家地理”丛书。34个行政区划、2000张精美图片 "> 图说天下学生版 地理百科 地球奇幻之旅（中国卷)（全3卷） 地理不再神秘，科普不再无趣，专为孩子量身打造“中国国家地理”丛书。34个行政区划、2000张精美图片 </a></p><p class="detail">1.专门为小学生打造的一套全面的百科类地理读物。本套丛书从华北、华东、华中、华南、西南、东北和西北7个地理区，北京、天津、河北、内蒙古等34个省级行政区出发，对中国国家地理地貌做了全面而详细的讲解——从奇山异峰、大江大河，到民俗民风、美景小吃，包罗万象，完美呈现。2.2000余张专业摄影师现场拍摄的图片和栩栩如生的手绘插图，让孩子足不出户，便将中国各地地理风貌和美景、美食尽收眼底。全书版式活泼新颖，图文并茂，相得益彰将美丽中国充分地展现在孩子面前。</p><p class="price"> <span class="search_now_price">¥26.10</span><a style="text-decoration:none;" class="search_discount">定价：</a><span class="search_pre_price">¥49.00</span><span class="search_discount"> (5.33折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style=" 100%;"></span></span><a ddclick="act=click_review_count&pos=23621498_4_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23621498.html#comment">333条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="日知图书" name="itemlist-author" href="/?key2=日知图书&medium=01&category_path=01.00.00.00.00.00">日知图书</a></span><span> /2015-01-01</span><span> /<a title="北京联合出版公司" name="P_cbs" href="/?key=&key3=%B1%B1%BE%A9%C1%AA%BA%CF%B3%F6%B0%E6%B9%AB%CB%BE&medium=01&category_path=01.00.00.00.00.00">北京联合出版公司</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&pos=23621498_4_1_q" href="javascript:AddToShoppingCart(23621498)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&pos=23621498_4_1_q" href="javascript:showMsgBox('lcase23621498','23621498','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23621498" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p> </li>
<li id="p23621501" class="line6">
<a target="_blank" href="http://product.dangdang.com/23621501.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&pos=23621501_5_1_q" title=" 图说天下学生版 历史百科 历史其实很有趣儿（中国卷)（全4卷） "><img alt=" 图说天下学生版 历史百科 历史其实很有趣儿（中国卷)（全4卷） " src="images/model/guan/url_none.png" data-original="http://img3x1.ddimg.cn/2/35/23621501-1_b_1.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&pos=23621501_5_1_q" href="http://product.dangdang.com/23621501.html" title=" 图说天下学生版 历史百科 历史其实很有趣儿（中国卷)（全4卷） 精彩，有趣儿，看得见，历史不再板着脸。权威准确，有图有真相，轻松读懂中华上下五千年。 "> 图说天下学生版 历史百科 历史其实很有趣儿（中国卷)（全4卷） 精彩，有趣儿，看得见，历史不再板着脸。权威准确，有图有真相，轻松读懂中华上下五千年。 </a></p><p class="detail">1、 为小学生量身定制。从选目、撰稿、插图到装帧设计，充分考虑小读者的阅读水平和审美取向，保证良好的阅读体验。2、 图文并茂，生动而有趣。把中华上下五千年的历史剪裁成300余个妙趣横生的小故事，每个故事都插配精美的手绘插图，让繁杂的中国历史变得直观而生动。3、 审读，兼具知识性和趣味性。本套系丛书聘请中国社会科学院中国历史所的研究员和中华书局编审审定，在追求趣味性和可读性的同时，也保证了史实的准确性。4、四本一套，全彩色图文版，精美包装，小学生必备历史知识读物，送给孩子的礼物。</p><p class="price"> <span class="search_now_price">¥28.90</span><a style="text-decoration:none;" class="search_discount">定价：</a><span class="search_pre_price">¥59.00</span><span class="search_discount"> (4.9折)</span></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style=" 100%;"></span></span><a ddclick="act=click_review_count&pos=23621501_5_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23621501.html#comment">627条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="日知图书" name="itemlist-author" href="/?key2=日知图书&medium=01&category_path=01.00.00.00.00.00">日知图书</a></span><span> /2015-01-01</span><span> /<a title="北京联合出版公司" name="P_cbs" href="/?key=&key3=%B1%B1%BE%A9%C1%AA%BA%CF%B3%F6%B0%E6%B9%AB%CB%BE&medium=01&category_path=01.00.00.00.00.00">北京联合出版公司</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&pos=23621501_5_1_q" href="javascript:AddToShoppingCart(23621501)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_favor&pos=23621501_5_1_q" href="javascript:showMsgBox('lcase23621501','23621501','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23621501" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p> </li>
<li id="p23512545" class="line7">
<a target="_blank" href="http://product.dangdang.com/23324596.html" name="itemlist-picture" class="pic" ddclick="act=normalResult_picture&pos=23324596_59_1_q" title=" 张洁儿童文学获奖作品——幽秘花期（冰心儿童图书奖获奖作品，梅子涵作序推荐，献给所有成长中的女孩，以及不曾放弃追求自我的人们） "><img alt=" 张洁儿童文学获奖作品——幽秘花期（冰心儿童图书奖获奖作品，梅子涵作序推荐，献给所有成长中的女孩，以及不曾放弃追求自我的人们） " src="images/model/guan/url_none.png" data-original="http://img3x6.ddimg.cn/97/18/23324596-1_b_2.jpg"></a><p name="title" class="name"><a target="_blank" name="itemlist-title" ddclick="act=normalResult_title&pos=23324596_59_1_q" href="http://product.dangdang.com/23324596.html" title=" 张洁儿童文学获奖作品——幽秘花期（冰心儿童图书奖获奖作品，梅子涵作序推荐，献给所有成长中的女孩，以及不曾放弃追求自我的人们） "> 张洁儿童文学获奖作品——幽秘花期（冰心儿童<font class="skcolor_ljg">图书</font>奖获奖作品，梅子涵作序推荐，献给所有成长中的女孩，以及不曾放弃追求自我的人们） </a></p><p class="detail">★冰心儿童图书奖获奖作品★著名儿童文学作家梅子涵作序推荐★献给所有成长中的女孩，以及不曾放弃追求自我的人们★少女成长必读书系，诠释一段青涩的少女时光</p><p class="price"> <span class="search_now_price">¥12.20</span><a style="text-decoration:none;" class="search_discount">定价：</a><span class="search_pre_price">¥18.00</span><span class="search_discount"> (6.78折)</span><a target="_blank" class="search_e_price" href="http://product.dangdang.com/1900424814.html">电子书：<i>¥3.60</i></a></p><p style="display: block" class="dang">当当自营</p><p class="search_star_line"><span class="search_star_black"><span style=" 100%;"></span></span><a ddclick="act=click_review_count&pos=23324596_59_1_q" class="search_comment_num" name="itemlist-review" target="_blank" href="http://product.dangdang.com/23324596.html#comment">53条评论</a></p><span style="background:url(http://img4.ddimg.cn/00035/pic/hg.png) no-repeat 0 0;_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://img4.ddimg.cn/00035/pic/hg.png',sizingMethod='noscale');" class="tag_box"></span><p class="search_book_author"><span><a title="张洁　著" name="itemlist-author" href="/?key2=张洁&medium=01&category_path=01.00.00.00.00.00">张洁</a>　著</span><span> /2013-08-01</span><span> /<a title="湖南少儿出版社" name="P_cbs" href="/?key=&key3=%BA%FE%C4%CF%C9%D9%B6%F9%B3%F6%B0%E6%C9%E7&medium=01&category_path=01.00.00.00.00.00">湖南少儿出版社</a></span></p><p class="bottom_p"><a ddclick="act=normalResult_addToCart&pos=23324596_59_1_q" href="javascript:AddToShoppingCart(23324596)" dd_name="加入购物车" name="Buy" class="search_btn_cart">加入购物车</a><a ddclick="act=normalResult_buyEBook&pos=23324596_59_1_q'" href="http://product.dangdang.com/1900424814.html" dd_name="购买电子书" name="ebook_buy_button" target="_blank" class="search_btn_cart">购买电子书</a><a ddclick="act=normalResult_favor&pos=23324596_59_1_q" href="javascript:showMsgBox('lcase23324596','23324596','http://customer.dangdang.com/wishlist/remote_addtofavorlist.aspx');" id="lcase23324596" dd_name="加入收藏" name="collect" class="search_btn_collect">收藏</a></p> </li>
</ul>
<script>
$(document).ready(function(){
// Initialize Tooltip
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>