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

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

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

详细每一个知识点不再赘述,參考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. Html网页表格结构化标记的应用

    在讲网页表格的结构化标记之前,还是先看几幅图片. Html表格的结构化 所谓的结构化,正如上述第一副图所看到的,就是把我们的表格划分为三种:表头.表体.表尾.从而当我们在改动表体部分的时候,不会影响到 ...

  2. hdu 4455 Substrings （DP 预处理思路）

    Substrings Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. Delphi数据类型转换（有几个字符串函数没见过，比如StringToWideChar和WideCharToString）

    DateTimeToFileDate                  函数                     将DELPHI的日期格式转换为DOS的日期格式         DateTimeT ...

  4. Java学习笔记——File类之文件管理和读写操作、下载图片

    Java学习笔记——File类之文件管理和读写操作.下载图片 File类的总结: 1.文件和文件夹的创建 2.文件的读取 3.文件的写入 4.文件的复制(字符流.字节流.处理流) 5.以图片地址下载图 ...

  5. Load and Unload

    一.前言 在前一段时间,我遭遇了一个现象诡异的Bug,最后原因归结为在DllMain里错误地调用了FreeLibrary(在本文最后对此Bug有详细的解释). MSDN里关于禁止在DllMain里调用 ...

  6. Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...

  7. LINUX编程学习笔记(十四) 创建进程与 父子进程内存空间

    1什么是进程:进程是一个执行中的程序 执行的程序: 代码->资源->CPU 进程有很多数据维护:进程状态/进程属性 所有进程属性采用的一个树形结构体维护 ps  -a//所有进程 ps - ...

  8. Powershell Mail module, 发送outbox 里的全部邮件（一个.csv文件代表一封邮件）

    把creating mail代码写到调用处,往outbox写入 mailxxx.csv文件,入面记录了邮件的主要内容 写入 #template $TMP = IMPORT-CSV "$($d ...

  9. 为什么 string.find()返回值是-1

    之前好像在哪里见到过这个问题,时间有点久,想不起来了,今天写字符串又碰到这个问题,书上给出的定义是当string.find()没有找到时返回的是一个非常大的值,网上有人说是-1,两种说法都对,由于整数 ...

  10. HDU 3488Tour(流的最小费用网络流）

    职务地址:hdu3488 这题跟上题基本差点儿相同啊... . 详情请戳这里. 另外我认为有要改变下代码风格了..最终知道了为什么大牛们的代码的变量名都命名的那么长..我决定还是把源点与汇点改成sou ...