①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” >
<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”>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;
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 ]’).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-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 >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;
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 ]’).tooltip();
})
</script>
</body>
</html>
