intel响应式+bootstrap
来源：互联网 发布：java实现socket长连接 编辑：程序博客网 时间：2024/06/07 03:04
<!DOCTYPE html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
user-scalable=no">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>intel官网</title>
<!--[if lt IE 9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="less/intel.css">
</head>
<body>
<nav class="narbar navbar-default navbar-fixed-top" id="top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"></a>
<button class="btn navbar-toggle" type="button"
data-toggle="collapse" data-target="#hidden">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="hidden">
<div class="dropdown navbar-left">
<a href="#" class="dropdown-toggle navbar-text"
data-toggle="dropdown">
菜单<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">China(简体中文)</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">登录</a>
<div class="dropdown-menu">
<div class="panel panel-default">
<div class="panel-body">
<h3>登录</h3>
<p>您是否在英特尔工作?</p>
<form>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="用户名">
</div>
<div class="form-group">
<input type="password"
class="form-control"
placeholder="密码">
</div>
<div class="form-group">
<label class="label-control">
<input type="checkbox">
登录表明您同意我们的服务条款
</label>
</div>
<button class="btn btn-success"
type="button">
登录
</button>
</form>
</div>
</div>
</div>
</li>
</ul>
<form class="navbar-form navbar-right">
<p class="form-control-static">查找内容</p>
<p class="form-control-static">|</p>
<div class="form-group has-feedback">
<input type="text" placeholder="搜索"
class="form-control">
<span class="glyphicon glyphicon-search"></span>
</div>
</form>
</div>
</div>
</nav>
<section class="container" id="main">
<!--第一行-->
<div class="row">
<div class="col-xs-12">
<h2>欢迎来到英特尔</h2>
</div>
</div>
<!--第二行-->
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/intel.web.864.486.1.jpg"
class="img-responsive">
<div class="img-title">
<h2>五代酷睿芯，强劲创体验</h2>
<p>立即探索第五代智能英特尔立即探索第五代智能英特尔
立即探索第五代智能英特尔
五代酷睿芯，强劲创体验五代酷睿芯，强劲创体验</p>
<a href="#" class="btn btn-info">
立即探索第五代智能英特尔
</a>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<img src="img/intel.web.368.207.1.jpg"
class="img-responsive">
<div class="half-mask">
<h4>解密2合1电脑</h4>
<p>解密2合1电脑解密2合1电脑解密2合1电脑解密2合1电脑</p>
<p><a href="#">了解更多</a></p>
</div>
</div>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="media">
<div class="media-left">
<img src="img/intel.web.81.108.png">
</div>
<div class="media-body">
<ul class="list-unstyled">
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--第三行-->
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="row">
<ul class="col-md-12 col-sm-6 col-xs-12 list-unstyled">
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
</ul>
<div class="col-md-12 col-sm-6 col-xs-12">
<img src="img/intel.web.368.207.2.jpg"
class="img-responsive">
<div class="half-mask">
<h4>马上订阅因特尔IT中心精选资源</h4>
<p>解密2合1电脑解密2合1电脑解密2合1电脑解密2合1电脑</p>
<p><a href="#">了解更多</a></p>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-xs-12">
<img src="img/intel.web.864.486.2.jpg"
class="img-responsive">
<div class="img-title">
<h2>IT的最佳拍档</h2>
<p>立即探索第五代智能英特尔立即探索第五代智能英特尔
立即探索第五代智能英特尔
五代酷睿芯，强劲创体验五代酷睿芯，强劲创体验</p>
<a href="#" class="btn btn-info">
了解更多
</a>
</div>
</div>
</div>
<!--第四行-->
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/intel.web.864.486.3.jpg"
class="img-responsive">
<div class="img-title">
<h2>灵活高效，迅速响应，真正的业务优势</h2>
<p>立即探索第五代智能英特尔立即探索第五代智能英特尔
立即探索第五代智能英特尔
五代酷睿芯，强劲创体验五代酷睿芯，强劲创体验</p>
<a href="#" class="btn btn-info">
了解方法
</a>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<img src="img/intel.web.368.207.3.jpg"
class="img-responsive">
<div class="half-mask">
<h4>英特尔产品中心</h4>
<p>解密2合1电脑解密2合1电脑解密2合1电脑解密2合1电脑</p>
<p><a href="#">了解更多</a></p>
</div>
</div>
<ul class="col-md-12 col-sm-6 col-xs-12 list-unstyled">
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<footer id="foot">
<div class="container">
<div class="row">
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">支持</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">法律声明</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">社交</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<dl class="col-xs-12 dl-horizontal">
<dt>
<img src="img/logo.png" class="img-responsive">
</dt>
<dd>英特尔公司</dd>
</dl>
</div>
</div>
</footer>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootlint.js"></script>
<script>
bootlint.showLintReportForCurrentDocument([]);
</script>
</body>
</html>
<html>
<head lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,
user-scalable=no">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>intel官网</title>
<!--[if lt IE 9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="less/intel.css">
</head>
<body>
<nav class="narbar navbar-default navbar-fixed-top" id="top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand"></a>
<button class="btn navbar-toggle" type="button"
data-toggle="collapse" data-target="#hidden">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="hidden">
<div class="dropdown navbar-left">
<a href="#" class="dropdown-toggle navbar-text"
data-toggle="dropdown">
菜单<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
<li><a href="#">intel产品</a></li>
</ul>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">China(简体中文)</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">登录</a>
<div class="dropdown-menu">
<div class="panel panel-default">
<div class="panel-body">
<h3>登录</h3>
<p>您是否在英特尔工作?</p>
<form>
<div class="form-group">
<input type="text"
class="form-control"
placeholder="用户名">
</div>
<div class="form-group">
<input type="password"
class="form-control"
placeholder="密码">
</div>
<div class="form-group">
<label class="label-control">
<input type="checkbox">
登录表明您同意我们的服务条款
</label>
</div>
<button class="btn btn-success"
type="button">
登录
</button>
</form>
</div>
</div>
</div>
</li>
</ul>
<form class="navbar-form navbar-right">
<p class="form-control-static">查找内容</p>
<p class="form-control-static">|</p>
<div class="form-group has-feedback">
<input type="text" placeholder="搜索"
class="form-control">
<span class="glyphicon glyphicon-search"></span>
</div>
</form>
</div>
</div>
</nav>
<section class="container" id="main">
<!--第一行-->
<div class="row">
<div class="col-xs-12">
<h2>欢迎来到英特尔</h2>
</div>
</div>
<!--第二行-->
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/intel.web.864.486.1.jpg"
class="img-responsive">
<div class="img-title">
<h2>五代酷睿芯，强劲创体验</h2>
<p>立即探索第五代智能英特尔立即探索第五代智能英特尔
立即探索第五代智能英特尔
五代酷睿芯，强劲创体验五代酷睿芯，强劲创体验</p>
<a href="#" class="btn btn-info">
立即探索第五代智能英特尔
</a>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<img src="img/intel.web.368.207.1.jpg"
class="img-responsive">
<div class="half-mask">
<h4>解密2合1电脑</h4>
<p>解密2合1电脑解密2合1电脑解密2合1电脑解密2合1电脑</p>
<p><a href="#">了解更多</a></p>
</div>
</div>
<div class="col-md-12 col-sm-6 col-xs-12">
<div class="media">
<div class="media-left">
<img src="img/intel.web.81.108.png">
</div>
<div class="media-body">
<ul class="list-unstyled">
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!--第三行-->
<div class="row">
<div class="col-md-4 col-xs-12">
<div class="row">
<ul class="col-md-12 col-sm-6 col-xs-12 list-unstyled">
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
</ul>
<div class="col-md-12 col-sm-6 col-xs-12">
<img src="img/intel.web.368.207.2.jpg"
class="img-responsive">
<div class="half-mask">
<h4>马上订阅因特尔IT中心精选资源</h4>
<p>解密2合1电脑解密2合1电脑解密2合1电脑解密2合1电脑</p>
<p><a href="#">了解更多</a></p>
</div>
</div>
</div>
</div>
<div class="col-md-8 col-xs-12">
<img src="img/intel.web.864.486.2.jpg"
class="img-responsive">
<div class="img-title">
<h2>IT的最佳拍档</h2>
<p>立即探索第五代智能英特尔立即探索第五代智能英特尔
立即探索第五代智能英特尔
五代酷睿芯，强劲创体验五代酷睿芯，强劲创体验</p>
<a href="#" class="btn btn-info">
了解更多
</a>
</div>
</div>
</div>
<!--第四行-->
<div class="row">
<div class="col-md-8 col-xs-12">
<img src="img/intel.web.864.486.3.jpg"
class="img-responsive">
<div class="img-title">
<h2>灵活高效，迅速响应，真正的业务优势</h2>
<p>立即探索第五代智能英特尔立即探索第五代智能英特尔
立即探索第五代智能英特尔
五代酷睿芯，强劲创体验五代酷睿芯，强劲创体验</p>
<a href="#" class="btn btn-info">
了解方法
</a>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-md-12 col-sm-6 col-xs-12">
<img src="img/intel.web.368.207.3.jpg"
class="img-responsive">
<div class="half-mask">
<h4>英特尔产品中心</h4>
<p>解密2合1电脑解密2合1电脑解密2合1电脑解密2合1电脑</p>
<p><a href="#">了解更多</a></p>
</div>
</div>
<ul class="col-md-12 col-sm-6 col-xs-12 list-unstyled">
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
<li>
<a href="#">英特尔酷睿M处理器
<span class="glyphicon glyphicon-chevron-right"></span></a>
</li>
</ul>
</div>
</div>
</div>
</section>
<footer id="foot">
<div class="container">
<div class="row">
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">支持</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">法律声明</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<ul class="col-md-3 col-sm-6 col-xs-12 list-unstyled">
<li><a href="#">社交</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
<li><a href="#">关于英特尔</a></li>
</ul>
<dl class="col-xs-12 dl-horizontal">
<dt>
<img src="img/logo.png" class="img-responsive">
</dt>
<dd>英特尔公司</dd>
</dl>
</div>
</div>
</footer>
<script src="../js/jquery-1.11.3.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootlint.js"></script>
<script>
bootlint.showLintReportForCurrentDocument([]);
</script>
</body>
</html>
0 0
- intel响应式+bootstrap
- bootstrap响应式导航
- bootstrap响应式导航
- bootstrap响应式布局
- Bootstrap 响应式实用工具
- Bootstrap响应式网格
- bootstrap 响应式实用工具
- bootstrap响应式布局
- 【Bootstrap】响应式实用工具
- Bootstrap响应式导航
- Bootstrap响应式标题
- Bootstrap 响应式实用工具
- bootstrap响应式网页
- Bootstrap 响应式实用工具
- BootStrap响应式布局
- bootstrap响应式工具
- bootstrap:响应式布局
- bootstrap响应式
- Linux命令之basename 命令
- 汉诺塔问题
- tensorflow学习笔记十：Ubuntu 16.04 上安装 CUDA 7.5/8.0 超详细教程
- java序列化(二)之jackson实现简单对象的序列化,反序列化
- 设计模式学习--备忘录模式
- intel响应式+bootstrap
- webstorm中的git操作，如何利用webstorm进行上传代码，进行clone代码
- RPC 远程过程调用
- OpenGL蓝宝书学习系列(一):3D图像的基础知识
- Java时间格式转换
- 怎样在C语言中正确的使用随机数函数rand
- 解决Android Studio中Refreshing gradle project时间过长的最简单方法
- 一次Unity-ios崩溃追踪
- find命令
