Bootstrap如同前台框架,它已经布置好不少的CSS,前端开发的使用需要则直接调用即可。其网站的网址就是http://www.bootcss.com。使用Bootstrap能减少前端开发时候在CSS样子的布置时间
需要使用Bootstrap先在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3。
将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。
之后就能够在此站点目录下的任何页面调用Bootstrap为前端快速建模。
不过值得注意的是,不同浏览器对于Bootstrap解释是不一样的,其中IE对某些样式读不出来,但是基本的功能不受影响,页面丑一点而已。
以下是IE与谷歌浏览器对同一页面的对比:
一、基本目标
使用Bootstrap来编写一个PC、平板、手机同时使用而且美观的登陆页面。
在PC上如果拉伸的话,各类元素会自动适应屏幕。
在手机上打开这类的页面的话,会直接适应手机屏幕,无需用户自动调节。
二、基本思想
页面的布局,根据Bootstrap固有的样式设计如下:
三、制作过程
如下整个页面具体代码如下,下面将一个一个标签来分析:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>登陆页面</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> </head> <body> <div class="panel panel-info"> <div class="panel-heading"> <table frame="void"> <tr> <td> <img src="images/img0.jpg" width="300px" height="300px" /> </td> <td> 欢迎。请您先登录。 </td> </tr> </table> </div> <div class="panel-body"> <form class="form-horizontal" role="form" action="1.html" method="post"> <div class="form-group"> <label for="username" class="col-sm-2 control-label"> 用户名: </label> <div class="col-sm-10"> <input type="text" name="username" class="form-control" placeholder="用户名" id="username" /> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label"> 密码: </label> <div class="col-sm-10"> <input type="password" name="password" class="form-control" placeholder="密码" id="password" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-info"> 登陆 </button> <small> 没有账号?<a href="http://2.com">点击注册</a> </small> </div> </div> </form> </div> </div> </body> </html>
1.<head>标签
先在<head>标签中,放入如下两行代码:
<head> <title>登陆页面</title> <!--要求页面自动适应浏览器的屏幕--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--声明我要使用bootstrap--> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> </head>
2.<body>标签
(1)首先写入<div class="panel panel-info"></div>,然后在其中放入代码,其基本说明如下图:
(2)<div class="panel-heading">标签
<div class="panel-heading"> <!--设置表格对这个CSS图层进行布局,在img标签中加入align="left"是不好用的,图象会向图层外溢出--> <!--同<table border="0">--> <table frame="void"> <tr> <td> <img src="images/img0.jpg" width="300px" height="300px" /> </td> <td> 欢迎。请您先登录。 </td> </tr> </table> </div>
(3)<div class="panel-body">标签下,先放入一个表单元素form class="form-horizontal" role="form" action="1.html" method="post">,此表单与HTML的普通表单相比,就是多了class属性与role属性,class属性无需多说,如果值为form的话,表单即使有足够位置,外标签与输入框也不会在同一行,如果值为现在的form-horizontal,那么则如图效果所示。role属性看不出有如何效果,此处仅仅是根据bootstrap的中文文档添加的。
接下来,各个form表单下的元素如下:
<div class="panel-body"> <form class="form-horizontal" role="form" action="1.html" method="post"> <!--每一个属性的外标签与输入框构成一个form-group元组--> <div class="form-group"> <!--如下的class属性是为了其能够根据屏幕的大小自动拉伸--> <label for="username" class="col-sm-2 control-label"> 用户名: </label> <div class="col-sm-10"> <!--此处的placholder意为不输入任何东西的说明灰字,当然在IE8中无法解释。id看不出有什么作用,仅仅是根据Bootstrap中文文档的要求而添加的--> <input type="text" name="username" class="form-control" placeholder="用户名" id="username" /> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label"> 密码: </label> <div class="col-sm-10"> <input type="password" name="password" class="form-control" placeholder="密码" id="password" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <!--此处的button与HTML的普通submit按钮是有区别的,但不影响表单的提交--> <button type="submit" class="btn btn-info"> 登陆 </button> <!--<small>标签保证了这段文字与submit按钮同一行--> <small> 没有账号?<a href="http://2.com">点击注册</a> </small> </div> </div> </form> </div>
至此,本页面的开发完成。
如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:
Bootstrap学习教程
Bootstrap实战教程
Bootstrap插件使用教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统,包括了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的使用技巧和注意事项,需要的朋友参考一下 栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。 1692年,新登基的法国国
手机QQ的账号选择功能一直与众不同别具一格,通过一个下箭头拉开在原有的账号密码中间展开一个账号盒子,盒子中有已经登陆过的账号头像,选择一个头像即可快速切换。今天为大家再来基本上重现这一功能的demo。 功能点: -初始状态默认有2已登录的QQ账号,您可以直接下拉看到这2个账号,点击头像即可填入到2个文本框内。 -账号盒子被打开的时候,头像 和账号密码等会变成半透明 -如果您另行输入一个新的QQ号,
本文向大家介绍Bootstrap登陆注册页面开发教程,包括了Bootstrap登陆注册页面开发教程的使用技巧和注意事项,需要的朋友参考一下 Bootstrap登陆注册功能比较简单, 主要参考bootstrap 表单功能(http://v3.bootcss.com/css/#forms) 大家也可以参考这篇关于bootstrap 表单基本知识点的文章进行学习:《Bootstrap每天必学之表单》 遇
为了省事,我们直接建个index.jsp,把内容放进去 下面就是内容了,自行复制粘贴了, 文件建在WebContent下面就好了. 留意一下,这里是引用新浪cdn的jquery,如果无法访问,自行换成其他可用地址吧. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
我在当前项目中使用Butternife库时遇到了一点问题。我目前正在为手机和平板电脑优化项目,有时两者的布局文件之间会有细微的差异,例如 该类如下所示: 问题是,当在电话上查看时,这会引发一个丢失视图的异常,因为“text2”视图不存在。这周围有什么吗?或者,对于并非所有布局都可用的视图,我必须使用findViewById。谢了!
本文向大家介绍MvcPager分页控件 适用于Bootstrap,包括了MvcPager分页控件 适用于Bootstrap的使用技巧和注意事项,需要的朋友参考一下 软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPager 是个不错的选择。 请访问http://www.webdiyer.com/mvcpager/ 由于自带的分页样式不能和项目整体风格兼容,所以我们准备改写源代码,