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

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

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

详细每一个知识点不再赘述,參考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. kgdb调试注意事项

    0    首先提下注意事项的背景:    kgdb和printk共用一个串口 1    设置波特率:    //最高支持460800波特率    arm-eabi-gdb  ./vmlinux    ...

  2. Swift - 导航条（UINavigationBar）的使用

    与导航控制器(UINavigationController)同时实现导航条和页面切换功能不同. 导航条(UINavgationBar)可以单独使用,添加至任何的UIView中.UINavigation ...

  3. js中静态函数与变量

    一 私有变量和函数 js中没有概念上的私有,公有也没有静态和非静态相关概念,有的只能是通过作用于来模仿 函数的块级作用域使得函数内部成员可以不被外部所访问,比如我们使用块级作用于定义一个类 //定义一 ...

  4. 14.6.1 Creating InnoDB Tables 创建InnoDB 表:

    14.6.1 Creating InnoDB Tables 创建InnoDB 表: 创建一个InnoDB 表,使用CREATE TABLE 语句,你不需要指定 ENGINE=InnoDB子句 如果In ...

  5. Android读取网络图片

    本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在android4.0之后,已不同意在主线程中进行网络请求操作了, 否则会出现N ...

  6. Python爬行动物（一）：基本概念

    定义网络爬虫          网络爬虫(Web Spider,也被称为网络蜘蛛,网络机器人,也被称为网页追逐者).按照一定的规则,维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁,自己主动索引 ...

  7. QT断点续传（原理:需要在HTTP请求的header中添加Rang节,告诉服务器从文件的那个位置开始传输.格式为bytes 开始传输的位置）

    //功能:    根据一个URL地址将数据保存到指定路径下,支持断点续传//参数:    url            --需要访问的URL地址//         SavePath       -- ...

  8. New 和 GetMem 的不同之处

    如果操作一个 record 指针中的字符串变量,会不会丢失 string 的内 存空间,造成内存泄漏? 结果是:使用 New() 分配的内存,会自动初始化 record 的内容,并且在 Dispose ...

  9. ZeroClipboard插件：兼容各浏览器网页复制功能

    常规利用JS编写的网页复制功能只对IE有效,无法做到兼容其它浏览器,代码如下: function copyToClipBoard(){ var clipBoardContent="" ...

  10. C++ Primer 学习笔记_32_STL实践与分析（6） --再谈string类型（下）

    STL实践与分析 --再谈string类型(下) 四.string类型的查找操作 string类型提供了6种查找函数,每种函数以不同形式的find命名.这些操作所有返回string::size_typ ...