使用bootstrap写作案例
关超2019-04-29 19:44:22424
<html>
<head>
<title>bootstrap仿站</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style type="text/css">
*{margin: 0; padding: 0}
</style>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse">
<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="mianban.html" target="content">案例</a></li>
<li><a href="#">解决方案</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">开发语言分类 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="输入关键词">
</div>
<button type="submit" class="btn btn-info">查询</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">进入后台</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">关于我们 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">我们地址</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="slider">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active ">
<img src="images/1.jpg">
<div class="carousel-caption">轮播1</div>
</div>
<div class="item">
<img src="images/2.jpg">
<div class="carousel-caption">轮播2</div>
</div>
<div class="item">
<img src="images/3.jpg">
<div class="carousel-caption">轮播3</div>
</div>
</div>
<a href="#slider" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#slider" class="carousel-control right" data-slide="prev">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5>社区热帖</h5>
<div class="list-group">
<a href="#" class="list-group-item active">
小程序开发<span class="badge">562</span>
</a>
<a href="#" class="list-group-item" traget="content">APP 开发<span class="badge">181</span></a>
<a href="#" class="list-group-item">PHP 开发<span class="badge">397</span></a>
<a href="#" class="list-group-item">JAVA 开发<span class="badge">214</span></a>
<a href="#" class="list-group-item">Python 开发<span class="badge">69</span></a>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">技术文章</h4>
<p class="list-group-item-text">所有的技术手册均可下载</p>
</a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">视频教程</h4>
<p class="list-group-item-text">所有的视频均可下载</p>
</a>
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">工具下载</h4>
<p class="list-group-item-text">所有的工具均可下载</p>
</a>
</div>
<div class="text-center">
<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">菜鸟必点</button>
</div>
</div>
<div class="col-md-10">
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>html是什么意思？</h3>
<button type="button" class="close" data-dismiss="modal">X</button>
</div>
<div class="modal-body">
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
1.简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
以上就是html是什么意思？的详细内容，更多请关注php中文网其它相关文章！
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">分享</button>
<button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<iframe width="100%" height="800px" name="content" frameborder="0"></iframe>
</div>
</div>
</div>
</body>
</html>