根据一篇文章,我再想想写下,无意义,他决定收手。

或者直接做一个简单的基本的模板它

主要知识点包含栅格系统、响应式图片、导航条(固定在顶部和底部)、搜索框等等

详细每一个知识点不再赘述,參考Bootstrap中文网

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

		<title>indexl.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

		<meta http-equiv="description" content="this is my page">

		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">

		<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

		<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

		<style type="text/css">

			body {

				padding-top: 70px;

				padding-bottom: 70px;

			}

			.starter-template {

				padding: 40px 15px;

				text-align: center;

			}

			.address {

				background: #efb73e;

				color: #fff;

				padding: 10px 0;

			}

		</style>

	</head>

	<body>

		<div class="navbar navbar-default navbar-fixed-top">

			<div class="container">

				<div class="navbar-header">

					<button type="button" class="navbar-toggle collapsed"

						data-toggle="collapse" data-target=".navbar-collapse">

						<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="#">内刊IT评论</a>

				</div>

				<div class="navbar-collapse collapse">

					<ul class="nav navbar-nav">

						<li class="active">

							<a href="#">首页</a>

						</li>

						<li>

							<a href="#news">新闻</a>

						</li>

						<li>

							<a href="#forum">论坛</a>

						</li>

						<li class="dropdown">

							<a href="#" class="dropdown-toggle" data-toggle="dropdown">知识库

								<span class="caret"></span> </a>

							<ul class="dropdown-menu" role="menu">

								<li>

									<a href="#">Java</a>

								</li>

								<li>

									<a href="#">C++</a>

								</li>

								<li>

									<a href="#">PHP</a>

								</li>

								<li>

									<a href="#">JavaScript</a>

								</li>

								<li>

									<a href="#">JQuery</a>

								</li>

								<li>

									<a href="#">Html5</a>

								</li>

							</ul>

						</li>

					</ul>

					<div  class="navbar-right">

						<form class="navbar-form navbar-left" role="search">

							<div class="input-group">

								<input type="text" class="form-control" placeholder="搜索...">

								<span class="input-group-btn">

									<button class="btn btn-default" type="button">

										Go

									</button> </span>

							</div>

						</form>

						<form class="navbar-form navbar-left" >

							<div class="input-group">

								<span class="input-group-btn">

									<button class="btn btn-default" type="button">

										登录

									</button> </span>

							</div>

						</form>

						<form class="navbar-form navbar-left">

							<div class="input-group">

								<span class="input-group-btn">

									<button class="btn btn-default" type="button">

										注冊

									</button> </span>

							</div>

						</form>

					</div>

				</div>

				<!--/.nav-collapse -->

			</div>

		</div>

		<div class="container">

			<div class="row cvheader">

				<div class="col-md-6">

					<h1 class="text-primary">

						IT民工

					</h1>

					<p>

						<span class="glyphicon glyphicon-paperclip"></span> 攻城狮

					</p>

				</div>

				<div class="col-md-3">

					<div class="row">

						<div class="col-md-4">

							<p id="contact" class="address text-center">

								联系

							</p>

						</div>

						<div class="col-md-8">

							<p>

								<span class="glyphicon glyphicon-envelope"></span>

								itmyhome@163.com

							</p>

							<p>

								<span class="glyphicon glyphicon-user"></span> 74955800(QQ群)

							</p>

							<p>

								<span class="glyphicon glyphicon-road"></span> 京城81号

							</p>

						</div>

					</div>

				</div>

				<div class="col-md-3">

					<p>

						<!-- 这里定义图片为响应式，而且加入圆角效果，以便保证图片在不同设备上都能够完美显示 //-->

						<img data-toggle="tooltip" data-placement="left" id="avatar"

							title="hello" class="img-responsive img-rounded"

							src="img/flower.jpg" alt="">

					</p>

				</div>

			</div>

		</div>

		<div class="container">

			<div class="col-md-4">

				<h3>

					孩子们看到老式电脑后的反应

				</h3>

				<img data-toggle="tooltip" data-placement="left" id="avatar"

					title="hello" class="img-responsive img-rounded"

					src="img/1.jpg" alt="">

				老式电脑，并非指的历史上第一台图灵机计算机，也不是指第一台体积有几间屋子大小的那台ENIAC电脑，也不是第一台IBM

				pc机，而是苹果公司的Apple Monitor III。

			</div>

			<div class="col-md-4">

				<h3>

					IT培训师

				</h3>

				<img data-toggle="tooltip" data-placement="left" id="avatar"

					title="hello" class="img-responsive img-rounded"

					src="img/2.jpg" alt="">

				小鱼儿（注：Pilot

				Fish，本文主角的名字）的公司聘请了一个第三方公司为他们的用户进行Window7培训。但结果却发现这个公司并不能非常好的胜任这样的工作。

			</div>

			<div class="col-md-4">

				<h3>

					客户是这样描写叙述他们的需求的

				</h3>

				<img data-toggle="tooltip" data-placement="left" id="avatar"

					title="hello" class="img-responsive img-rounded"

					src="img/3.jpg" alt="">

				技术服务project师小鱼儿（注：Pilot

				Fish。本文主角的名字）接到一个任务。须要去外地的一个客户那里检查他们的电脑设备。

那里的客户抱怨他们的电脑屏幕会时不时的颤动。

			</div>

			<div class="col-md-4">

				<h3>

					我是怎样打败迟延症的

				</h3>

				<img data-toggle="tooltip" data-placement="left" id="avatar"

					title="hello" class="img-responsive img-rounded"

					src="img/4.jpg" alt="">

				关于迟延症的话题我在Hacker

				News上不断的看到有人提出来(你也读了，不是吗？)，感觉有必要将我是怎样跟迟延症做斗争的方法分享给大家。然而，我这里说的主要是针对程序猿/美工，但事实上不论什么人都能够使用。首先最重要的….

			</div>

			<div class="col-md-4">

				<h3>

					程序猿怎样活得明确

				</h3>

				<img data-toggle="tooltip" data-placement="left" id="avatar"

					title="hello" class="img-responsive img-rounded"

					src="img/5.jpg" alt="">

				可事实上问题不在于此。编程，就跟写作、绘画、作曲一样，首先是一种创造性的活动。而不是一个种技术工作。

当然。

				对一种技术或编程语言的不断练习和保持熟悉非常重要。这事实上就是在学习使用工具和技法。但它并不会让你本质上变成一名更优秀的程序猿。

</div>

			<div class="col-md-4">

				<h3>

					Bash脚本15分钟进阶教程

				</h3>

				<img data-toggle="tooltip" data-placement="left" id="avatar"

					title="hello" class="img-responsive img-rounded"

					src="img/6.jpg" alt="">

				这里的Bash脚本技术技巧最初是来自谷歌的“Testing on the Toilet” (TOTT)。这里是一个修订和扩增版本号。

			</div>

		</div>

		<div class="navbar navbar-default navbar-fixed-bottom" style="padding-top: 5px;">

			<div class="footer text-center">

				<div class="container">

					</br>

					<p class="text-muted">

						@版权所有  翻版不究

					</p>

				</div>

			</div>

		</div>

	</body>

</html>

效果预览：

新建一 html文件 所有拷贝上面代码覆盖就可以。若显示图片,可下载所有源代码：http://download.csdn.net/detail/itmyhome/7701407

版权声明：本文博客原创文章，博客，未经同意，不得转载。

Bootstrap网站模板的更多相关文章

  1. 循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面

    在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...

  2. 40 个超棒的免费 Bootstrap HTML5 网站模板

    Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 目前 ...

  3. 25+免费的Bootstrap HTML5网站模板

    在前端框架中,Bootstrap可以说是非常有名的高级网站设计框架.网上也有很多使用Bootstrap程序创建的免费模板.这些模板设计成响应式模式,因此你可以使用它们来为所有的设备平台和浏览器创建网站 ...

  4. 12个免费的 Twitter Bootstrap 后台模板

    在互联网上提供很多免费的 Bootstrap 管理后台主题.所有你需要做的就是将它们下载并安装它们,这真的不是什么难事.问题是如何寻找到能够完美符合您的网站需求的主题.当然,你可以自己制作自定义的主题 ...

  5. 16个时髦的扁平化设计的 HTML5 & CSS3 网站模板

    创建网站最好办法之一是使用现成的网站模板或使用开源 CMS 应用程序.所以,今天这篇文章给大家带来的是16款基于 HTML5 & CSS3 的精美的扁平风格网站模板,大家可以借助这些优秀的网站 ...

  6. 2015年免费的25款 WordPress 网站模板

    2015年 WordPress 插件和主题的数量继续在增长.这一年,我们可以期待WP主题引入一些新的技术,从背景,自适应响应式图像到从背景图片中提取主色. 本文包含25款最近发布的 WordPress ...

  7. 15款精美的 WordPress 电子商务网站模板

    在这篇文章中,我们收集了15款精美的 WordPress 电子商务网站模板.WordPress 作为最流行的博客系统,插件众多,易于扩充功能.安装和使用都非常方便,而且有许多第三方开发的免费模板,安装 ...

  8. 20个新鲜出炉的网站模板【HTML & PSD】

    这里给大家分享20 个新鲜出炉的免费网站模板.这些设计元素将成为你下一个项目的重要素材,可以帮你节省很多的时间.与往常一样,我们经常漫游网络,寻找最好的资源, HTML.CSS 和 PSD 等等,记得 ...

  9. 【特别推荐】10款唯美浪漫的婚礼 & 结婚纪念网站模板

    互联网的重要性不言而喻,如今我们的生活已经完全离不开网络.这里给大家分享一组唯美浪漫的结婚邀请网站以及婚礼请柬网站模板,如果你也正想制作这样的网站,相信这些漂亮的网站模板能够带给你很大的帮助,让你快速 ...

随机推荐

  1. Swift - 动画效果的实现方法总结（附样例）

    在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用 ...

  2. 14.2.2 InnoDB Multi-Versioning InnoDB 多版本

    14.2.2 InnoDB Multi-Versioning InnoDB 多版本: InnoDB 是一个多版本的存储引擎: 它保留信息关于改变数据的老版本,为了支持事务功能 比如并发和回滚. 这些信 ...

  3. SQL视图和多表连接

    本篇博客关注的焦点是视图的使用以及视图和多表连接的配合.以便可以了解视图,以及更好的使用视图. 首先,还是要说明一下视图的定义:视图是基于SQL语句的结果集的可视化虚拟表,换句话说视图就是SQL查询结 ...

  4. JAVA的反射机制学习笔记（二）

    上次写JAVA的反射机制学习笔记(一)的时候,还是7月22号,这些天就瞎忙活了.自己的步伐全然被打乱了~不能继续被动下去.得又一次找到自己的节奏. 4.获取类的Constructor 通过反射机制得到 ...

  5. javascript学习初衷

    很久没有过来写东西了,由于要做小网页,介于不懂javascript,一味的去爬其他站点的代码下来,却不能自由组合,控制,达到自己想要的效果, 于是只能沉下心,javascript从头学起,还记得张老师 ...

  6. WinRarHelper帮助类

    WinRarHelper帮助类 关于本文档的说明 本文档使用WinRAR方式来进行简单的压缩和解压动作,纯干货,实际项目这种压缩方式用的少一点,一般我会使用第三方的压缩dll来实现,就如同我上一个压缩 ...

  7. SQLite/嵌入式数据库

    SQLite/嵌入式数据库 的项目要么不使用数据库(一两个文配置文件就可以搞定),要么就会有很多的数据,用到 postgresql,操练sqlite的还没有.现在我有个自己的小测试例子,写个数据库对比 ...

  8. jasperreport报表生成时编译的错误

    在帮徐老板解决一个jasperreport报表生成时编译的错误: 刚开始时,加上他所给的 jar 包之后,错误显示为: net.sf.jasperreports.engine.JRException: ...

  9. hdu2647解题报告

    题意:有个工厂的老板给工人发奖金,每人基础都是888,工人们有自己的想法,如:a 工人想要比 b 工人的奖金高,老板想要使花的钱最少 那么就可以 给b 888,给a 889 ,但是如果在此基础上,b也 ...

  10. Linux正则表达式grep与egrep

    grep -io "http:/=[A-Z0-9]\{16\}" ./wsxf.txt >wsxf_urls.txt Linux正则表达式grep与egrep 正则表达式:它 ...