CSS_Bootstrap

By admin in 必赢网址是多少 on 2018年10月14日

①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"&gt;

<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;

<script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

<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"&gt;

 

<!– jQuery library –>

<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;

 

<!– Latest compiled JavaScript –>

<script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

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"&gt;

  <script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;

  <script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

</head>

<body>

 

<div class=”container”>

  <h1>My First Bootstrap Page</h1>

  <p>This is some text.</p>

</div>

 

</body>

</html

二、Grid Basic

图片 1

 

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"&gt;

 

<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;

 

<script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

 

<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=”width:100%”
alt=”Image”>

 

</div>

 

<div class=”col-sm-4″>

 

<p>Lorem ipsum..</p>

 

<img src=”birds2.jpg” class=”img-responsive” style=”width:100%”
alt=”Image”>

 

</div>

 

<div class=”col-sm-4″>

 

<p>Lorem ipsum..</p>

 

<img src=”birds3.jpg” class=”img-responsive” style=”width:100%”
alt=”Image”>

 

</div>

 

<div>

 

<footer class=”container-fluid bg-4 text-center”>

 

<p>Bootstrap Theme Made By<a
href=”http://www.w3schools.com"&gt;www.w3schools.com&lt;/a&gt;&lt;/p&gt;

 

</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"&gt;
    <script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
    <script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    <style>
        .container{
            padding:80px 120px;
        }
        .person{
            border:10px solid transparent;
            margin-bottom:25px;
            width: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
*/
            width: 100%; /* Set width to 100% */
            margin: auto;
        }

        .carousel-caption h3 {
            color: #fff !important;
        }

        @media (max-width: 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 {
        width: 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"&gt;&lt;/script&gt;
        <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"&gt;
    <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"&gt;&lt;/script&gt;
    <script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    <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-width: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{
        width: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;width:100%;”></div>

<!– Add Google Maps –>
<script
src=”http://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
<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"&gt;www.w3schools.com&lt;/a&gt;&lt;/p&gt;
    </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"&gt;
    <script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
    <script
src=”http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    <style>
        .container{
            padding:80px 120px;
        }
        .person{
            border:10px solid transparent;
            margin-bottom:25px;
            width: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
*/
            width: 100%; /* Set width to 100% */
            margin: auto;
        }

        .carousel-caption h3 {
            color: #fff !important;
        }

        @media (max-width: 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 {
        width: 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"&gt;&lt;/script&gt;
        <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"&gt;&lt;/a&gt;&lt;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=”width:
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"&gt;12359条评论&lt;/a&gt;&lt;/p&gt;&lt;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=”width:
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"&gt;84条评论&lt;/a&gt;&lt;/p&gt;&lt;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=”width:
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"&gt;6257条评论&lt;/a&gt;&lt;/p&gt;&lt;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"&gt;&lt;/a&gt;&lt;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=”width:
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"&gt;393条评论&lt;/a&gt;&lt;/p&gt;&lt;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"&gt;&lt;/a&gt;&lt;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=”width:
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"&gt;333条评论&lt;/a&gt;&lt;/p&gt;&lt;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"&gt;&lt;/a&gt;&lt;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=”width:
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"&gt;627条评论&lt;/a&gt;&lt;/p&gt;&lt;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"&gt;&lt;/a&gt;&lt;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"&gt;电子书:&lt;i&gt;¥3.60&lt;/i&gt;&lt;/a&gt;&lt;/p&gt;&lt;p
style=”display: block” class=”dang”>当当由营</p><p
class=”search_star_line”><span
class=”search_star_black”><span style=”width:
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"&gt;53条评论&lt;/a&gt;&lt;/p&gt;&lt;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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 亚洲必赢app官方下载 版权所有