文章目录

  • 一 为何使用Bootstrap
  • 二 需求
  • 三 设计模式化
  • 四 较为标准的Bootstrap模板

一 为何使用Bootstrap

  Bootstrap确实很优秀,但这里我并不想多介绍它,有关它的信息大家可网上自行搜索。

  毕竟自己还是做Java的,前端部分虽然了解一些,但绝谈不上精通。选择Bootstrap很大程度上还是它的一些特性很吸引我,容易上手,移动设备优先,并且提供了很多优秀的组件设计,使用它可以让我在很短的时间内设计出一个可用的页面。

  这里我先把自己写的一个很简单的首页贴一下,当然没有过多的样式设计,别嫌弃:

二 需求

  所有的程序设计都离不开“设计”,这在我记录服务端开发的时候就常说,同样的前端设计依然如此。不论使用Bootstrap或是其他前端开发工具,我们首先要很明确需求,然后才是方案。

  回忆一下前八部分,就服务端的需求而言,需要支持用户管理,包括用户注册、登陆、会话管理等功能;服务端还需要支持对帖子(主题,topic)的发布、评论、回复、浏览等功能。

  这部分需求其实就是在为前端设计提供数据访问接口的支持,所以对于前端来说,除了绘制web页面,我们需要实现:

  1. 用户注册
  2. 用户登陆
  3. 帖子浏览
  4. 发布帖子
  5. 评论帖子
  6. 回复评论

  其他的需求暂且不谈,把这些基础的功能实现之后,再行讨论。

三 设计模式化

  按服务端设计的经验,前期的准备工作是比较复杂,且占工时比重最多的,前端设计依然如此,只要我们在把需求转化为设计方案的时候,方案设计足够清晰合理,后期的工作进度会自然而然的追赶回来。

  这里谈到一个事情——设计模式化。自从接触Java之后,慢慢的对面向对象设计有了些了解,对于封装、设计模式的需求在工作中慢慢的体现出来,在逐步微小的重构过程中,一些优秀的设计思路足以让我的工作效率得到极大的提升。这里说的并非简单的复制黏贴,而是可重用的设计。

  将重复性的工作剥离出来,将个性化的工作分门别类,这个过程就是泛化的体现。Js不是一个完全的面向对象开发语言,但是这些设计思路是通用的,这也是我并不推荐大家投身在茫茫开源框架中的主要原因。

四 较为标准的Bootstrap模板

  回归主题,一个较为标准的Bootstrap模板应该是什么样的?这里需要从它自身的一些特性(正式因为这些特性我才选择了它)考虑。

  首先是Bootstrap目标,自Bootstrap3开始,移动优先策略成了它的设计目标,为了支持更好的缩放设计,我们需要在Head节点中加入下面的代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  摘抄自菜鸟教程中的描述:

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
注意,这种方式我们并不推荐所有网站使用,还是要看您自己的情况而定!

  第二点——浏览器兼容性。这可能是前端开发最闹心的事情了,X-UA-Compatible属性其实是为IE8而设置的,它有诸多兼容性设置可选,更为具体的说明读者可网络搜索,这里我选择加入以下节点:

<meta http-equiv="X-UA-Compatible" content="edge" />

  它表明Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容。

  第三点——栅栏设计。这里说的是Bootstrap的网格设计,有些基础的人应该知道Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。既然我想做一个可复用的模板,我假定我的页面仅有三列,每页至少有一个固定于底部的页尾,主体内容含多少行由实际应用内容决定。

  综上,我设计的模板如下(其实展示效果我也反复测试了很多才确定的,这个过程不可避免,但是为以后的设计提供了坚实的基础,值得!):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/your-style.css" rel="stylesheet">
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询,如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body><div class="container"><div class="row clearfix"><div class="col-sm-0 col-md-1 col-lg-2">1号</div><div class="col-sm-12 col-md-10 col-lg-8">2号</div><div class="col-sm-0 col-md-1 col-lg-2">3号</div></div></div><!-- 页尾 --><footer class="navbar-fixed-bottom"><div class="container"><div class="row clearfix"><div class="col-sm-0 col-md-1 col-lg-2"></div><div class="col-sm-12 col-md-10 col-lg-8"><address contenteditable="true"><strong>冒泡工作室, 大福楠</strong><br /> <abbr title="Phone">Email:</abbr>983950935@qq.com</address></div><div class="col-sm-0 col-md-1 col-lg-2"></div></div></div></footer><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

  它展示的效果如下:

完整JavaWeb项目笔记 第九部分-Bootstrap模板设计相关推荐

  1. JAVAWEB项目--模拟考试系统数据库设计与实现(二)

    模拟考试项目需求参见博文<JAVAWEB项目–模拟考试系统需求(一)> 1.考试系统实体关系图 2.考试系统数据字典设计 3.考试系统创建数据库和表 -- 创建数据库testsystem ...

  2. JavaWeb项目笔记包括jsp的用法selevt,HTML5

    -------------------<认识HTML5>----------------- 1 <>生成的快捷键 是table键 ctrl+D是直接复制一行 2 <h1& ...

  3. 项目笔记,bootstrap table数据进行上下移动

    //* /上移 */$('#maintenanceClinic #orderUp').click(function () {debuggerlet data = [];// 获取所有数据var all ...

  4. JavaWeb项目+MVC三层架构+Mysql+Tomcat+汽车配件销售系统前后端+可以用于学习javaweb项目入门

    JavaWeb项目+MVC三层架构+Mysql+Tomcat+汽车配件销售系统前后端+可以用于学习javaweb项目入门 可以用于课程设计.毕业设计的知识点入门学习 提示:此资源仅用于javaweb网 ...

  5. JAVAWEB项目--模拟考试系统需求(一)

    登录界面 用户分为两种角色,分别是"普通用户"."管理员",两种角色登陆后的页面是不一样的: 1.用户部分 1-1.普通用户登录进来后的页面: 1-2.当用户作 ...

  6. 前端项目微金所1 - bootstrap模板,Compatible(兼容),Viewport(视口),条件注释,第三方依赖,MediaQuery媒体查询...

    前端项目微金所笔记1 基础的bootstrap模板 <!DOCTYPE html> <html lang="en"><head><meta ...

  7. 【Javaweb学习笔记】在Eclipse中创建Web项目

    [Javaweb学习笔记]在Eclipse中创建Web项目 哈喽大家好,这里是Java框架学习笔记专栏第二期 本期内容--在Eclipse中创建Web项目 前期回顾: 第一期--schema约束 笔者 ...

  8. javaWeb项目学生选课系统完整源码附带数据库

    项目介绍 学生选课系统,也可以说教务管理系统,功能比较多,可做课程设计和毕业设计参考,角色分为学生,老师,管理员,分别对应不同的操作 学生:注册登录,修改信息,查看选课信息,查看成绩,查看公告,课程信 ...

  9. Intellij Idea 搭建一个完整的JavaWeb项目(二)

    手把手搭建一个完整的JavaWeb项目 本案例使用Servlet+jsp制作,用Intellij Idea IDE和Mysql数据库进行搭建,详细介绍了搭建过程及知识点. 主要功能有: 1.用户注册 ...

最新文章

  1. git 合并两个分支的某个文件
  2. 三种字符编码:ASCII、Unicode和UTF-8
  3. Nexenta和ParaScale发布开源存储产品
  4. C++有用的字符函数库
  5. frame,iframe,frameset 的区别
  6. Keil 5中精简器件支持包,手动安装pack包
  7. 2021牛客暑期多校训练营4 E - Tree Xor 线段树 + 拆分区间
  8. 《软件工程》课之-调查问卷的心得体会
  9. 科目三考试里面的会车,调头,靠边停车通过标准
  10. 原F1000Prime推荐:ACE2泛癌分析图谱(TCGA数据库挖掘)
  11. 找不到腾讯云MFA动态码了,无法登录腾讯云的解决办法
  12. 12bit的图像如何向8bit转化_干货分享 | 如何鉴别Western Blot图像的真实性?
  13. 面对大数据,我们应该干的事~大话开篇
  14. 2012年全国最新Android开发工程师薪资水平调查分析
  15. 查询oracle 表记录数,Oracle 查询所有表的记录数
  16. 如何使用组策略提升Windows系统性能
  17. 8.10 数据库安全性II Day28
  18. struts2中常用Result类型(type)的用法
  19. 【交通流理论拟合】-速度流量拟合
  20. android ip冲突检测工具,android ping ip 来检测连接是否正常

热门文章

  1. 《四川省建设工程安全文明施工费计价管理办法》的通知〔2017〕5(二)
  2. 基于JSP技术和SSM框架的Web聊天系统的设计和开发
  3. 防孤岛保护装置在光伏发电项目中的应用
  4. MATLAB/simulink 并网型双馈风力发电机(DFIG) 输出功率1.5MW 可实现单位因数并网
  5. visdom API 方便使用查阅
  6. 【雷达书籍推荐】 第1期 现代雷达系统分析与设计
  7. Mysql异构数据方案Canal
  8. php外链图片转换,解决zblogPHP远程外链图片自动保存的办法
  9. 前端面试题:JS中的原型和原型链
  10. Class^=,Class*= ,Class$=含义