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

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

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

详细每一个知识点不再赘述,參考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. python中的中文编码

    我现在编写python代码,有一些内容需要用中文编写,例如注释,一些其它的东西 默认python是不支持中文的,包括两个方面不支持,一是文件编码默认是ansi的,二是虚拟机运行解析脚本时也是非utf的 ...

  2. 可运行jar包调用exe可运行文件，子进程阻塞

    背景: 须要在项目的測试工具中加入一个button,点击后直接打开某exe工具. 这个工具的功能是导入txt文件,转为excel报表输出. 无奈解析了两行之后就停止不动了,也不报错.关闭測试工具后,就 ...

  3. Dnasp计算LD

    Dnasp计算LD Table of Contents 1 Dnasp 计算LD 1 Dnasp 计算LD Dnasp有很多的功能,现在主要来记录其计算LD的功能. 首先File——然后打开data— ...

  4. Codeforces Round #309 (Div. 2) C

    题意: 就是给出总共同拥有k种颜色.每种颜色有ki种,排列必须满足第i+1种的最后一种颜色必须在第i种最后一种颜色的后面,其它颜色任意.总共同拥有多少种排列点的方法. 分析: 如果d[i]表示前i种的 ...

  5. hprose rpc使用实例（同时有Java和Delphi客户端的例子）

    php server <?php require_once('src/Hprose.php'); function hello($name) { echo "Hello $name!& ...

  6. 在Ubuntu上录制视频和编辑（很全）

    Linux多媒体三剑客:GIMP,Inkscape,Blender3D Blender基金会制作的开源微电影Sintel:http://www.sintel.org/about电影采用Creative ...

  7. XCode所有版本

    You can find the DMGs for Xcode and other development tools onhttps://developer.apple.com/downloads/ ...

  8. POJ 2318 TOYS(计算几何)

    跨产品的利用率推断点线段向左或向右,然后你可以2分钟 代码: #include <cstdio> #include <cstring> #include <algorit ...

  9. 如何搭建NTP服务（转）

    最近,在搭建Oracle RAC过程中,需要用到DNS和NTP,其中,DNS用于域名.IP管理,NTP用于时间同步.其实,很久以前搭建过这两种服务,但技术,本质上,符合“用进废退”的客观规律.用得越频 ...

  10. sha256

    SHA-512 (这些有时候也被称做 SHA-2). 简介 SHA 家族 SHA (Secure Hash Algorithm,译作安全散列算法) 是美国国家安全局 (NSA) 设计,美国国家标准与技 ...