实例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 101 Template</title>
<style>
.header{
width: 100%;
background: black;
}
.font{
color: #ffffff;
}
.navbar {
margin-bottom: 0px;
}
.main{
/* background: rgba(0,255,255,0.3); */
margin:20px;
}
.post-meta {
margin-top: -0.5em;
padding: 0;
color: #999;
font-size: .92857em;
}
.post-meta li {
display: inline-block;
margin: 0 8px 0 0;
padding-top: 1em;
padding-right: 1em;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 header">
<div class="container">
<div class="row">
<div class="col-md-12 ">
<p><h1 class="font">我的新blog</h1></p>
<p><h3 class="font" style="margin-left: 5%">这是我的副标题</h3></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- 导航 -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">首页</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">
<a href="#">PHP <span class="sr-only">(current)</span></a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Linux<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">测试1</a></li>
<li><a href="#">测试2</a></li>
<li><a href="#">测试3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</ul>
</div>
</div>
</nav>
<!-- 导航 end-->
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="main">
<h2>面向对象</h2>
<ul class="post-meta">
<li>作者: admin</a></li>
<li>时间: <time>2018-09-21</time></li>
<li>评论: 20</li>
</ul>
<p>一、面向对象
1、什么是类？
具有相同属性（特征）和方法（行为）的一系列个体的集合，类是一个抽象的概念。
2、什么是对象？
从类中，拿到的具有具体属性值的个体，称为对象。对象是一个具体的个体。
3、类和对象的关系？
类是对象的抽象化！对象是类的具体化！
类仅仅表明这类对象有哪些属性，但是不能有具体的值，所以类是抽象的。
对象是将类的所有属性赋值后，产生具体的个体，所有对象是具体的。</p>
</div>
<div class="main">
<h2>面向对象</h2>
<ul class="post-meta">
<li>作者: admin</a></li>
<li>时间: <time>2018-09-21</time></li>
<li>评论: 20</li>
</ul>
<p>一、面向对象
1、什么是类？
具有相同属性（特征）和方法（行为）的一系列个体的集合，类是一个抽象的概念。
2、什么是对象？
从类中，拿到的具有具体属性值的个体，称为对象。对象是一个具体的个体。
3、类和对象的关系？
类是对象的抽象化！对象是类的具体化！
类仅仅表明这类对象有哪些属性，但是不能有具体的值，所以类是抽象的。
对象是将类的所有属性赋值后，产生具体的个体，所有对象是具体的。</p>
</div>
<div class="main">
<h2>面向对象</h2>
<ul class="post-meta">
<li>作者: admin</a></li>
<li>时间: <time>2018-09-21</time></li>
<li>评论: 20</li>
</ul>
<p>一、面向对象
1、什么是类？
具有相同属性（特征）和方法（行为）的一系列个体的集合，类是一个抽象的概念。
2、什么是对象？
从类中，拿到的具有具体属性值的个体，称为对象。对象是一个具体的个体。
3、类和对象的关系？
类是对象的抽象化！对象是类的具体化！
类仅仅表明这类对象有哪些属性，但是不能有具体的值，所以类是抽象的。
对象是将类的所有属性赋值后，产生具体的个体，所有对象是具体的。</p>
</div>
<div class="main">
<h2>面向对象</h2>
<ul class="post-meta">
<li>作者: admin</a></li>
<li>时间: <time>2018-09-21</time></li>
<li>评论: 20</li>
</ul>
<p>一、面向对象
1、什么是类？
具有相同属性（特征）和方法（行为）的一系列个体的集合，类是一个抽象的概念。
2、什么是对象？
从类中，拿到的具有具体属性值的个体，称为对象。对象是一个具体的个体。
3、类和对象的关系？
类是对象的抽象化！对象是类的具体化！
类仅仅表明这类对象有哪些属性，但是不能有具体的值，所以类是抽象的。
对象是将类的所有属性赋值后，产生具体的个体，所有对象是具体的。</p>
</div>
</div>
<div class="col-md-3">
<div class="page-header">
<h3>这是一个边栏的标题</h3>
</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="page-header">
<h3>这是一个边栏的标题</h3>
</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<nav aria-label="Page navigation" style="text-align: center;" >
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 header">
<div class="container">
<div class="row">
<h1 class="font">网站尾部</h1>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例