天之痕苏
- 浏览: 18402 次
-
文章分类
最新评论
bootstrap界面杂谈
1、link标签
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> …… </head>link标签支持所有的浏览器，定义了内部文档与外部资源的关系，通常情况下都是对外部资源的应用。并且只能出现在<head> </head>标签中，可出现多次。
说明：href表示被引用的资源链接；rel表示本文档和被引用文档之间的关系，rel=“stylesheet”表示被引用的文档是一个样式表。
eg: 登录jsp页面的<head>标签部分
<head> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta name="viewport" content="width=device-width,innitial-scale=1"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> <META HTTP-EQUIV="expires" CONTENT="0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="/EVM/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <link href="/EVM/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href = "/EVM/img/sac_logo_small.jpg" rel="Shortcut Icon"> <!-- 页面的地址栏上面，页面标题旁的小图标 -->
<title>登陆</title> </head>
在这里要提出的，是上段代码中的倒第三行：
<link href = "/EVM/img/sac_logo_small.jpg" rel="Shortcut Icon"> <!-- 页面的地址栏上面，页面标题旁的小图标 -->
很多人可能都注意过，当自己把网站收藏时，收藏夹中的该条记录前面会有个小图标，当你再次点击后，打开的页面前面还是有该图标，我称其为网站的标志：
eg：
标签前面会有个
2、meta标签
<meta>也是<head>中经常要用到的标签。
定义：<meta>提供了本页面的元信息（类似于元数据，描述数据的数据），描述本页面的信息。
meta有两个属性：1、name; 2、http-equiv。下面分别介绍一下两个属性。
<1>name
格式：<meta name = "参数" content = "参数">
eg：
<meta name="viewport" content="width=device-width,innitial-scale=1">name有如下几种参数值：
A.keywords(关键字)：用来告诉搜索引擎，本网页的搜索关键字是什么。
举例：
<meta name ="keywords" content="science, education,culture,politics,ecnomics">
B.description(描述)：说明本网页的主要内容是什么。
举例：
<meta name = "description" content = "This is sss's blog, welcome to everybody!">
C.robot(机器人向导)：用来告诉搜索机器人，哪些页面需要索引，哪些不需要索引。
举例：
<meta name = "robot" content = "none">
这里的content有几个固定的参数可选：all, none, index, noindex, follow, nofollow，默认的是all。
D.author(作者)：标注网页的作者。
举例：
<meta name = "author" content = "SSS">
<2> http-equiv
定义：相当于网页的文件头作用，向浏览器返回一些有用的信息，帮助浏览器正确的定位网页内容。
格式：<meta http-equiv = "参数" content = "参数值">
eg：
<head> <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta name="viewport" content="width=device-width,innitial-scale=1"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> <META HTTP-EQUIV="expires" CONTENT="0"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="/EVM/bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <link href="/EVM/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link href = "/EVM/img/sac_logo_small.jpg" rel="Icon"> <!-- 页面的地址栏上面，页面标题旁的小图标 --> <title>登陆</title> </head>
http-equiv有几种类型的参数：
A. Expires(期限)：设定网页到期的时间，一旦网页上的时间到期，就需要浏览器重新向服务器重新传输，获取网页内容。
举例：
<meta http-equiv = "expires" content = "Fri, 12 Jan 2001 18:18:18 GMT" >
注意：时间必须要用GMT的时间格式
B. Pragma(cache模式)：禁止浏览器从本地缓存中访问网页内容。举例：
<meta http-equiv = "Pragma" content = "no-cache" >
注意：如果这样设定，则用户无法脱机访问。
C. Refresh(刷新)：自动刷新并指向新页面。
举例：
<meta http-equiv = "Refresh" content = "2; url = http://baidu.com" >
注意：content中的2表示浏览器在本页面暂停2秒后转向URL指向的地址。
D. Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。
举例：
<meta http-equiv = "Set-Cookie" content = "cookievalue = xxx; expires = Friday, 12-Dec-2014 :19:59:59 GMT; path = /" >
注意：时间要是GMT格式。
E. Window-target(窗口设定)：强制页面在当前窗口以独立页面显示。
举例：
<meta http-equiv = "Window-target" content = "_top" >
用途：防止别人在框架里调用自己的页面。
F. content-type(字符集的设定)：设定页面使用的字符集。
举例：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
下面综述meta标签的功能：
1、帮助页面给各搜索引擎搜索
meta很重要的一个功能就是设置关键字，用来帮助各大搜索引擎来搜索到你的网页。其中，最主要的就是keywords和description两个关键字。因为按照搜索引擎的工作原理，显示派出搜索机器人查看网页中meta里面的keywords和description关键字中的content，然后将内容保存在自己的数据库中，然后再根据关键字的密度进行排序，从而显示出网页。因此，设置好关键字，可以提高网站的点击率。
下面给出一些例子：
<meta name = "keywords" content = "政治，经济，文化，情感，生活，心灵，娱乐，电影，社会，金融，交通" >
<meta name = "description" content = "政治，经济，文化，情感，生活，心灵，娱乐，电影，社会，金融，交通" >网页里设置好这些关键字后，搜索引擎就可以自动搜索这些content，然后将结果放在自己的数据库中，再根据密度进行排序。
2、定义页面使用的语言
这是meta最常见的功能。起到定义该网页的语言类型。当浏览器访问该网站时，浏览器会自动将网页中的内容设置到你网页中设定的语言类型，比如utf-8，如果浏览器并没有安装utf-8码，那就网页就会呈现该浏览器默认的网页语言编码。同样的，如果网页是英文类型的，那么就可以设定charset = en。
<meta http-equiv = "content-Type" content = "type = "text/html; charset = gb2312" >
注意：改代码就表示将网页的语言设置成国标码。
3、自动刷新并指向指定页面
meta的这个功能就可以实现在无人干预的情况下，在本网页停留N秒之后，转向新网页。格式上面的refresh类型已给出。
4、实现网页转换时的动画效果
这个代码我还没有用过，功能是：在进入网页或者离开网页的一刹那实现动画效果。
代码如下：
<meta http-equiv = "Page-Enter" content = "revealTrans(duration=5.0, transition=20)" >
离开网页时的动画效果：
<meta http-equiv = "Page-Exit" content = "revealTrans(duration=5.0, transition=20)" >
一旦上述代码被加进<head> </head>中后，我们再进入或者离开网页，都会看到动画效果。
注意：所加的网页不能是一个frame页。
5、网页定级评价
6、控制页面缓冲
meta标签可以设置网页到期的时间(expires)，到期后，页面会重新向服务器提交请求，重新刷新页面。
7、控制显示窗口
<meta http-equiv = "Window-target" content = "_top" >
在<head> </head>中加入以上代码，可以防止页面被其他页面当做一个frame调用。
其他提到的功能都是上面http-equiv的几个关键字中提到的，入refresh，cache，expires等。
3、bootstrap3中的页面背景设置
这是在优化登录界面的时候碰到的难题。后来在网上看到了别人的一个样例，就是讲如何使得背景图片充满整个屏幕，
事例代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>窗口背景变化</title>
<style type="text/css">
*{margin:0;padding:0;}
#bg{
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
</head>
<body>
<div id="bg"><img src=" http://www.wallcoo.com/ad/Korea_Besti_Belli/images/jihyun-bestibelli06.jpg" alt="HIGH"></div>
<input type="text" id="msg" name="msg" size="50"/>
<script type="text/javascript">
window.onresize = window.onload = function(){
var w,h
if(!!(window.attachEvent && !window.opera))
{
h = document.documentElement.clientHeight;
w = document.documentElement.clientWidth;
}else{
h = window.innerHeight;
w = window.innerWidth;
}
document.getElementById('msg').value ='窗口大小：' + 'width:' + w + '; height:'+h;
var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
bgImg.width = (w - 5);
bgImg.height= (h-5) ;
}
</script>
</body>
</html>
另外在我的另外一篇博文中也提到了这个问题，点击这里查看；
我这里要说的是另外一种方式，这种方式也是我在别的网页源代码里看到的，网址是http://job.bootcss.com/。该网站也是用bootstrap写的界面，其中的一个界面显示效果如下：
有热气球的那部分，涉及的源码如下：
<header id="top-header" class="top-header jumbotron" style="background-image: url(/assets/img/ballon.jpg);"> <div class="container"> <div class="row"> <div class="col-md-8"> <div class="page-header"> <h1>招聘/求职</h1> <p class="lead">好工作都在这里啦！</p> </div> <div class="features media"> <h5 class="media-left">快捷入口：</h5> <div class="media-body"> <p class="coms"> <a target="_blank" href="http://company.liepin.com/1072424?mscid=b_o_0001" class="label label-default label-ali" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '阿里'])">阿里</a> <!-- <a href="/company/腾讯" class="label label-default label-tencent" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '腾讯'])">腾讯</a> --> <a target="_blank" href="http://company.liepin.com/884492?mscid=b_o_0001" class="label label-default label-baidu" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '百度'])">百度</a> <a target="_blank" href="http://company.liepin.com/3264402?mscid=b_o_0001" class="label label-default label-sina" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '金山'])">金山</a> <a target="_blank" href="http://company.liepin.com/856639?mscid=b_o_0001" class="label label-default label-sohu" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '迅雷'])">迅雷</a> <a target="_blank" href="http://company.liepin.com/6429309?mscid=b_o_0001" class="label label-default label-360" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '360'])">360</a> <!-- <a href="/company/小米" class="label label-default label-xiaomi" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '小米'])">小米</a> --> <a target="_blank" href="http://company.liepin.com/947003?mscid=b_o_0001" class="label label-default label-lenovo" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '畅游'])">畅游</a> </p> <p class="salary"> <a href="/salary/10" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '10万起'])">10万起</a> <a href="/salary/20" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '20万起'])">20万起</a> <a href="/salary/30" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '30万起'])">30万起</a> <a href="/salary/50" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '50万起'])">50万起</a> <a href="/salary/土豪" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '土豪'])">土豪</a> </p> </div> </div> </div> <div class="col-md-4 hidden-sm hidden-xs"> <div class="activities-wrap"> <div class="activities"> <h2>猎聘送“金卡” <i class="fa fa-star"></i></h2> <p>完善简历，抽“金卡”，高薪工作送到家！！高薪工作不要错过啦</p> <p class="text-center"> <a class="btn btn-default btn-sm" href="http://wenda.bootcss.com/question/70" target="_blank" onclick="_hmt.push(['_trackEvent', '活动', 'click', '活动详情'])">活动详情</a> <a class="btn btn-default btn-sm" href="http://www.liepin.com/event/landingpage/itweb.shtml?mscid=b_o_0002" target="_blank" onclick="_hmt.push(['_trackEvent', '活动', 'click', '完善简历'])">完善简历</a> </p> </div> </div> </div> </div> </div> </header>这里要指出的是，热气球作为了背景，且在前端界面是无法进行“复制图片”或者“图片另存为”的，这正好是我之前一直没有解决的问题，所以，我将上面代码中的这一句：
<header id="top-header" class="top-header jumbotron" style="background-image: url(/assets/img/ballon.jpg);">加入我的代码中，
<header id="top-header" class="top-header jumbotron span10 offset1" style="background-image: url(/EVM/img/sac_jietu5.jpg);"> <div class="row-fluid"> <div class = "span4 offset2 text-right"> <img src="/EVM/img/sac_jietu11.jpg" class = "img-rounded"> </div> <br> <div class="span4 text-left" style = "background-color:silver; border:1px solid red"> <br> <br> <form class="form-horizontal" method="post" action="/EVM/userAction" id="loginForm"> <div class="control-group span2 offset5"> <h2>登录</h2> </div> <br> <br> <br> <br> <br> <br> <div class="control-group"> <label class="control-label" for="inputEmail">用户名</label> <div class="controls"> <input type="email" id="inputEmail" placeholder="邮箱" name="inputEmail" title="请输入登录邮箱"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">密码</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password" name="inputPassword" required="required"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> 保存 </label> <button type="submit" class="btn">Sign in</button> </div> </div> <input type="hidden" name="method" value="login"> </form> </div> </div> </header>这里的界面效果展示如下：
其中，登录表单和图片左右的部分就是设置的背景图片，本来图片很小：
由此可见，<header ……>中的代码是将该图片多次覆盖而形成上面界面中的效果。这可能是另外的一种使图片占满div或者全屏的方式。
疑惑：如果图片足够大，是不是还会出现多张图片拼凑而成的界面？因为网站http://job.bootcss.com/中的气球图片是没有显示完全的，即整个区域只显示了一部分，所以不会出现多张图片拼凑的情况，针对这一疑惑，可能以后会给出答案，现在还是处于学习中~后续会继续更新
分享到：
发表评论
相关推荐
一套好用的bootstrap 界面框架，基于Bootstrap3.3.6最新版本开发的扁平化主题，采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，提供了诸多的强大的可以重新组合的UI组件
在这个“Bootstrap后台登录界面模板”中，我们可以找到一个预设计好的登录页面模板，这对于快速搭建后台管理系统非常有帮助。 模板设计遵循了Bootstrap的核心原则，包括网格系统、响应式布局以及易于定制的CSS类。...
这个“自己整理的bootstrap界面”资源包含了主页、查询页面和详情页面的设计，旨在为开发者提供一个基础的模板，便于快速构建响应式和移动优先的Web应用程序。 Bootstrap的核心特性包括响应式布局、网格系统、预定...
这个压缩包提供了一套基于Bootstrap的聊天界面模板，专为构建交互式的、响应式的聊天软件而设计。模板包括了几个关键的HTML页面，如登录、注册、重置密码，以及可能的主界面，使得开发者能够快速搭建一个功能完善的...
文件比较大分三个压缩包，Bootstrap 用户界面架构视频01
此外，Bootstrap还提供了预定义的CSS类，简化了诸如按钮、输入框、表单控件等元素的样式设置，使开发者能快速构建美观的界面。 在注册模板中，通常包括用户名、电子邮件、密码等必填字段，以及可能的确认密码、...
这个"基于Bootstrap的时尚登录界面设计.zip"文件提供了一个使用Bootstrap构建的现代且吸引人的登录界面示例，适用于那些希望创建用户友好、美观的网站登录页面的开发者。 首先，我们来详细了解一下Bootstrap的核心...
Bootstrap 3.3.7是该框架的一个稳定版本，它包含了诸如栅格系统、导航、按钮、表单、模态框（也就是弹出界面）等核心组件。这个模板特别之处在于，它将注册和登录界面设计成了点击后弹出的模态框，这样的设计能够...
Bootstrap ACE 是一个基于Bootstrap框架和ACE编辑器设计的后台管理界面模板，专为开发者和设计师提供了一套完整的、中文支持的界面解决方案。这个模板旨在帮助快速构建高效、响应式的Web应用后台界面，使得用户能够...
本教程将深入探讨BootStrap用户界面设计的基础和进阶知识，旨在帮助初级开发人员快速上手并掌握这一强大的工具。 一、BootStrap概述 Bootstrap是由Twitter开发并开源的一款HTML、CSS和JavaScript框架，它提供了一...
总结来说，"bootstrap布局设计器"提供了一个友好的界面，让用户可以轻松创建基于Bootstrap的网页布局。通过理解Bootstrap的栅格系统、HTML结构、CSS样式和JavaScript插件，开发者或设计师可以利用这个工具快速构建...
本模板基于Bootstrap，旨在提供一个简洁、美观且功能全面的后台管理界面。 响应式设计是现代网页设计的关键特性，它允许网页根据用户设备的屏幕尺寸和方向自动调整布局、图片大小和脚本功能。Bootstrap通过其预定义...
bootstrap首页界面，好看的界面，力与开发，嘻嘻嘻嘻嘻嘻
总的来说，这个Bootstrap4响应式登录注册界面模板提供了一个直观的学习平台，帮助初学者理解如何利用Bootstrap4构建适应各种设备的界面，并通过实战提升他们的前端开发技能。通过对模板的分析和修改，开发者可以深入...
在“基于Bootstrap 后台界面”的项目中，我们通常会利用Bootstrap的组件和样式来创建一个美观且功能丰富的管理后台。这个后台界面不仅设计得非常漂亮，而且具有主题更换功能，能够满足不同用户的个性化需求。同时，...
这个"Bootstrap管理界面主题"是专为构建管理后台界面而设计的一套资源集合，旨在提升用户体验，使开发者能够快速搭建功能丰富的管理界面。 Bootstrap的核心组件包括响应式布局、网格系统、导航条、下拉菜单、模态框...
Bootstrap.用户界面架构Bootstrap.用户界面架构Bootstrap.用户界面架构Bootstrap.用户界面架构Bootstrap.用户界面架构
在这个"bootstrap-login-forms.rar"压缩包中，我们关注的是如何使用Bootstrap来创建美观且功能完备的登录界面。 在Bootstrap中，登录界面的构建主要依赖于其预定义的CSS类和HTML结构。一个基本的登录表单通常包括...
"Bootstrap前台界面模板"是一个集合，旨在为前端开发者提供多种设计精美的界面示例，帮助他们快速启动新项目或改进现有的网页设计。 在Bootstrap中，界面模板通常包括导航栏、轮播图、网格系统、按钮、表单、下拉...
`css`目录下应该是自定义的样式表文件，用于扩展或覆盖Bootstrap默认样式，以满足特定登录界面的设计需求。可能包括对字体、颜色、背景、边距等的调整，以及响应式断点的设置，确保在不同设备上呈现理想效果。 `...