Bootstrap布局设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>******有限公司</title>
<meta name="description" content="公司注册 网站建设 微信公众号 企业邮箱 税务代理">
<meta name="author" content="******有限公司">
<script src="~/Themes/Scripts/Bootstrap/js/scripts.js"></script>
<script src="~/Themes/Scripts/jquery.min.js"></script>
<link href="~/Themes/Scripts/Bootstrap/css/style.css" rel="stylesheet" />
<script src="~/Themes/Scripts/Bootstrap/js/bootstrap.min.js"></script>
<link href="~/Themes/Scripts/Bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" style="margin-left:20px" href=""> <img src="~/Themes/Images/Home/ZYLogoSmall.png" /></a><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="">首页</a>
</li>
<li>
<a href="#">注册公司</a>
</li>
<li class="dropdown">
<a href="/" class="dropdown-toggle" data-toggle="dropdown">网站建设<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="/Home/WebConstruction">官方网站</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">淘宝网站</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">手机网站</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">企业邮箱</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">微信公众平台<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">微信服务号</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">微信订阅号</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">微信企业号</a>
</li>
</ul>
</li>
<li>
<a href="#">财务代理</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">新闻资讯<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">公司动态</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">行业动态</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">关于志越<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">公司简介</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">联系方式</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">招贤纳士</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<button type="submit" class="btn btn-default">
提交
</button> </form>
<ul class="nav navbar-nav navbar-right" style="margin-right:20px">
<li>
<a href="/Mana/Frame/Login" target="_blank">网站系统管理</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">友情链接<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="http://wanwang.aliyun.com/" target="_blank">域名注册</a>
</li>
<li>
<a href="http://wanwang.aliyun.com/" target="_blank">虚拟主机</a>
</li>
<li>
<a href="http://wanwang.aliyun.com/" target="_blank">云服务器</a>
</li>
<li class="divider">
</li>
<li>
<a href="https://mp.weixin.qq.com/cgi-bin/loginpage" target="_blank">微信公众平台</a>
</li>
<li class="divider">
</li>
<li>
<a href="http://www.bootcss.com/" target="_blank">Bootstrap中文网</a>
</li>
</ul>
</li>
</ul>
</div>
</nav> <div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button> <a class="navbar-brand" href=""> <img src="~/Themes/Images/Home/ZYLogoSmall.png" /></a><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="#">Link</a>
</li>
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" />
</div>
<button type="submit" class="btn btn-default">
Submit
</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</nav> <div class="carousel slide" id="carousel-745002">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-745002">
</li>
<li data-slide-to="1" data-target="#carousel-745002">
</li>
<li data-slide-to="2" data-target="#carousel-745002">
</li>
<li data-slide-to="3" data-target="#carousel-745002">
</li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img style="margin:0 auto" alt="Carousel Bootstrap First" src="~/Themes/Images/carousel/banner001.png" />
<div class="carousel-caption">
@*<h4>
First Thumbnail label
</h4>
<p>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
</p>*@
</div>
</div>
<div class="item">
<img style="margin:0 auto" alt="Carousel Bootstrap Second" src="~/Themes/Images/carousel/banner002.png" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="margin:0 auto" alt="Carousel Bootstrap Third" src="~/Themes/Images/carousel/banner003.png" />
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img style="margin:0 auto" alt="Carousel Bootstrap Fourth" src="~/Themes/Images/carousel/banner004.png" />
<div class="carousel-caption">
</div>
</div>
</div> <a class="left carousel-control" href="#carousel-745002" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-745002" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div> </div>
</div>
</div> <div class="container-fluid" style="margin-top:20px">
<div class="row">
<div class="col-md-12">
<div class="jumbotron" style="background-color:#bde2e1">
<blockquote>
<p style="color:red">
com/cn/net/org域名注册 | 阿里云虚拟主机 | 企业邮箱注册
</p> <small style="color:red"> 全程一对一技术支持+全程代理备案服务 <cite>有限公司</cite></small>
</blockquote>
<h4>
领先的互联网应用服务提供商，企业网络服务的首选品牌,秉承专业、诚信、服务、进取的价值观，坚持客户第一的服务理念；全部机房均部署独立IP、光纤接入及线路冗余电信级网络设备以及网络实时监控系统等，确保为用户提供高速、安全、可靠的网络环境。
</h4>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
@*<img alt="Bootstrap Thumbnail First" src="http://lorempixel.com/output/people-q-c-600-200-1.jpg" />*@
<embed src="http://static.video.qq.com/TPout.swf?vid=e0151j0tdzp&auto=0" allowfullscreen="true" quality="high" width="100%" height="300" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
<div class="caption">
<h3>
com/cn/net/org域名主机
</h3>
<p style="font-size:16px">
现在拥有域名，赢在互联网第一步！如果您现在就想域名注册，请发信息或者打电话给我们，我们收到信息您的信息后会及时与您联系，有好的Ideal就要马上注册，不然机会就会稍纵即逝！
</p>
<p>
<a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
@*<img alt="Bootstrap Thumbnail Second" src="http://lorempixel.com/output/city-q-c-600-200-1.jpg" />*@
<embed src="http://static.video.qq.com/TPout.swf?vid=o01450cor5r&auto=0" allowfullscreen="true" quality="high" width="100%" height="300" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
<div class="caption">
<h3>
阿里云云服务器
</h3>
<p style="font-size:16px">
如果您现在就想购买主机，请发信息或者电话给我们。我们收到您的信息后会及时与您联系，因为网站备案需要时日，所以虚拟主机应该早于网站正式上线之前购买！
</p>
<p>
<a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
@*<img alt="Bootstrap Thumbnail Third" src="http://lorempixel.com/output/sports-q-c-600-200-1.jpg" />*@
<embed src="http://static.video.qq.com/TPout.swf?vid=j0136zmmtmf&auto=0" allowfullscreen="true" quality="high" width="100%" height="300" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash">
<div class="caption">
<h3>
企业邮箱的注册和使用
</h3>
<p style="font-size:16px">
如果您需要了解更多详情，请发信息或者电话给我们。 企业邮箱目前是您公司不可或缺的一部分，我公司为了回馈广大客户将给客户提供使用教程已经技术指导！
</p>
<p>
<a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a>
</p>
</div>
</div>
</div>
</div>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>
</div>
</div>
</div> <div class="container-fluid" style="background-color:#808080">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12"> <address>
<strong>Twitter, Inc.</strong><br /> 795 Folsom Ave, Suite 600<br /> San Francisco, CA 94107<br /> <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
</div>
</div>
</div>
</div>
</div> <div class="container-fluid" style="background-color:#000000">
<div class="row">
<div class="col-md-12">
<div class="row" style="text-align:center;color:#ffffff">
Copyright © 2015 *****有限公司. All Rights Reserved.
</div>
</div>
</div>
</div> </body>
</html>
Bootstrap布局设计的更多相关文章
- BootStrap布局案例
BootStrap布局 bootstrap 2.3版与3.0版的使用区别 http://www.weste.net/2013/8-20/93261.html 以一个博客系统的首页,来介绍如何布局 1, ...
- 实现bootstrap布局的input输入框中的图标点击功能
使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...
- CSS布局设计
CSS布局设计: (1)固定布局:各个部分采用固定宽度的页面布局. (2)流式布局:通过定义模块和模块间距的百分比的方式来实现.缺点是会自动缩放,影响图片的美观. (3)响应式布局:页面可以用户的设备 ...
- 12个学习 CSS3 网站布局设计的优秀案例
网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...
- iOS界面布局设计
参考资料: 1. 谈谈如何学习ios 8的界面和布局设计 2. iOS 8 Auto Layout界面布局系列 3. 为iPhone 6设计自适应布局 4. 几张图弄明白iOS布局中的尺寸问题
- iOS发展 ---- 至iPhone 6自适应布局设计 Auto Layout
Apple从iOS 6增加了Auto Layout后開始就比較委婉的開始鼓舞.建议开发人员使用自适应布局,可是到眼下为止,我感觉大多数开发人员一直在回避这个问题,无论是不是因为历史原因造成的,至少他们 ...
- Devexpress之LayoutControl的使用及其控件布局设计
引言 Devexpress给我们提供了更加美观.更加丰富控件,但在学习和使用的同时经常会遇到诸多麻烦.今天在使用Devexpress的LayoutControl控件进行界面控件的布局设计时遇到了如下的 ...
- 移动UI布局设计原则(一)
学习笔记1 Learning notes one 移动UI布局设计的布局原则 Layout Principles of Mobile UI Layout Design 移动UI视觉交互设计法则 Des ...
- Java知多少（84）图形界面之布局设计
在界面设计中,一个容器要放置许多组件,为了美观,为组件安排在容器中的位置,这就是布局设计.java.awt中定义了多种布局类,每种布局类对应一种布局的策略.常用的有以下布局类: FlowLayout, ...
随机推荐
- linux configure
Linux环境下的软件安装,并不是一件容易的事情;如果通过源代码编译后在安装,当然事情就更为复杂一些;现在安装各种软件的教程都非常普遍;但万变不离其中,对基础知识的扎实掌握,安装各种软件的问题就迎刃而 ...
- 【Android开发学习笔记】【第九课】重力感应
概念 使用重力感应技术的Android游戏已经屡见不鲜,不知道自己以后会不会用到,所以先研究了一下. 在网上学习了一下,貌似没有api,所以得自己去分析手机处在怎样状态下.注意: 下面提供的demo程 ...
- 利用 libiconv 实现汉字编码 utf-8 格式 和 gbk格式的相互转换
参考文章:http://jimmee.iteye.com/blog/2174693 关于windows上编译libiconv的库,请参见:http://www.cnblogs.com/tangxin- ...
- linux下安装memcache以及开启memcache扩展
memcache 的工作就是在专门的机器的内存里维护一张巨大的hash表,来存储经常被读写的一些数组与文件,从而极大的提高网站的运行效率,减轻后端数据库的读写压力.在安装memcached之前需要安装 ...
- 借用layer让弹层不限制在iframe内部
使用方法: 1 除了layer的success,end,cancel回掉函数以外其它的layer参数都可以使用. 2 使用前在layer的js后边把该js引入(可以命名为layerExtend). 3 ...
- C/C++ 笔试、面试题目大汇总
1.求下面函数的返回值( 微软) int func(x) { int countx =0; while(x) { countx ++; x = x&(x-1); } return countx ...
- Magento white screen or how XML can break your site?
Magento white screen or how XML can break your site? by SANDO on 02. OCT, 2012 in MAGENTO, SMALL TIP ...
- (leetcode)Implement Stack using Queues
Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...
- 面向对象分析方法(II)
什么是真正的对象? 什么是面向对象分析阶段时的对象? 什么是面向对象设计阶段时的对象? 什么是面向对象实现阶段时的对象? 真正的对象 我所理解的真正的对象就是现实生活中客观存在或不存在的真正的对象.这 ...
- imx6 kernel clock
前段时间查看了uboot的时钟,kernel的也稍微了解了下,记录于此,以后再来补充完善. board-mx6q_sabresd.c MACHINE_START(MX6Q_SABRESD, " ...