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

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

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

详细每一个知识点不再赘述,參考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. PreferenceActivity使用示例

    MainActivity如下: package cn.testpreferenceactivity; import android.content.SharedPreferences; import ...

  2. 采购订单me22n 或者me21n增强 （点击保存和回车）

    IF_EX_ME_PROCESS_PO_CUST DATA:l_header TYPE mepoheader, l_item TYPE mepoitem. DATA:lt_items TYPE pur ...

  3. JSP中两种include的区别

    首先说明这两种都是什么: <%@ include file=”relativeURI”%> 可以叫作静态include(静态包含),是jsp指令中的一种,(JSP指令控制JSP编译器如何去 ...

  4. Cocos2d-x layout （二）

    相对某个控件进行布局 Size widgetSize = Director::getInstance()->getWinSize(); Text* alert = Text::create(&q ...

  5. 跟我一起学extjs5(11--自己定义模块的设计)

    跟我一起学extjs5(11--自己定义模块的设计)        从这一节開始我们来设计并完毕一个自己定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息. 下面信息仅仅是我自己在开发过程中 ...

  6. 在Window和Linux下使用Zthread库

    ZThread库是一个开源的跨平台高级面向对象的线性和sycnchronization 库,以运行POSIX 和Win32 系统中的C++程序. ZThread库的主页:http://zthread. ...

  7. Python的对象和类型

    Python使用对象来存储数据,构造任何类型的值都是一个对象. 任何一个对象都有三个特性:身份,类型和值. 身份是对象的唯一标识,可以通过内建函数id()得到,这个值可以认为是该对象的内存地址. Py ...

  8. POJ 3974 最长回文字串（manacher算法）

    题意:给出一个字符串,求出最长回文字串. 思路:一开始我直接上了后缀数组DC3的解法,然后MLE了.看了DISCUSS发现还有一种计算回文字串更加优越的算法,就是manacher算法.就去学习了一下, ...

  9. 详谈隐藏Tabbar的几种方法

    如今正在写的一个项目,涉及到了使用两个TabBar,然后我须要显示当中一个的时候,然后隐藏另外一个,可是中间却出现故障了.我查了一些资料,想总结一下关于TabBar的隐藏. 第一种方法是: //隐藏t ...

  10. IBinder在进程之间传递一个对象的形式(一)

    主张 什么时候service通常被称为远程时的,用到aidl来定一个接口供service和client来使用,这个事实上就是使用Binder机制的IPC通信.当client bind service成 ...