初步使用bootstrap快速创建页面


Posted in Javascript onMarch 03, 2016

1. 安装bower前端包管理器

bower是一个前端软件包管理器,便于安装、更新以及卸载javascript,css,html等框架资源,并解决之间的相互依赖关系。

npm install -g bower // 安装
bower help // 查看帮助

这里YY一下:

npm是node.js的包管理器,通过它安装了express,express-generator,supervisor,bower等等软件,bower又是前端框架的软件包,安装了bootstrap以及jquery等一些依赖包。突然发现简直是包包相扣啊,渐渐的醉了。其中的水实在是太深了,想简单学个web开发也不是那么容易的事啊,有种淡淡的忧伤。然并卵,心向往之,一如既往。

2. 安装bootstrap以及jquery

当然你也可以直接将bootstrap以及jquery下载下来,放入项目文档中,不用安装什么包管理器,自己解决简单的依赖关系就OK了,但是不都是为了快速建站嘛,装个包管理器自动解决依赖关系。并且在发布自己的项目的时候,也不需要将所有的框架包一块发布,而只需将相关的json文件放到项目里就可以了,别人一目了然你的依赖关系,便于快速搭建。

有了bower,直接bower install bootstrap就OK了,因为依赖关系,它会自动给你装上jquery,完事。

3. 模板引擎中引入bootstrap以及jquery

安装好了或者说项目中已经放置好了bootstrap和jquery之后,接下来就是在文件中引用它,在views文件夹中创建一个head.jade文件,顾名思义就是放置HTML中head标签里面的一些内容。如下代码:

link(href='/bootstrap/dist/css/bootstrap.min.css',rel='stylesheet')
script(src='/jquery/dist/jquery.min.js')
script(src='/bootstrap/dist/js/bootstrap.min.js')

创建完head.jade后,接下来在所有需要的页面中,加上include head.jade包含到页面中就OK了。

4. 使用模版布局

由于基本上所有的页面都需要包含head.jade,总不能每个页面都写上include head.jade 吧,于是布局文档layout.jade就要起作用了。单独创建layout.jade文件,将一些共性的代码写进去。

doctype html
html
 head
 title= title
 link(rel='stylesheet', href='/stylesheets/style.css')
 include ./includes/head
 body
 include ./includes/header
 h1= title
 block content

如上,一些独立的模块依然可以通过include语句进行加载,最后一句block content就是模版布局的关键,意思就是在模版的此处插入页面,也就是应用此模版布局的差异处。

然后在应用此模版布局的页面中,加上extent layout就OK了。如下:

extends ../layout
block content
 p Welcome to #{title}

注意:extends模版文件以及include代码中使用文件尽量使用相对路径。

5. 开始编辑页面

准备工作都做得差不多了,那么接下来就是使用jade语法以及bootstrap样式来编辑页面了。下面简单大致写个首页(index)以及详情页(detail)。

初步使用bootstrap快速创建页面

// index.jade
extends ../layout

block content
 .container
 .row
 h1= title
 small 图书列表
 each item in books
 .col-md-3.col-xm-6
  .thumbnail.text-center
  a(href='/books/#{item._id}')
  img(src='#{item.poster}',alt='#{item.title}')
  .caption
  h3= item.title
  .btn-group
  a.btn.btn-primary(href='/books/#{item._id}') 查看详情
  a.btn.btn-primary(href='#{item.buyUrl}') 购买书籍

初步使用bootstrap快速创建页面

// detail.jade
extends ../layout

block content
 .container
 .row
 h1= title
 small= book_title
 .col-md-9.col-sm-9
 .thumbnail
  img(src='#{book_poster}')
  .caption
  p= book_info
  a.btn.btn-primary(href='#{book_buyUrl}') 购买书籍
 .col-md-3.col-sm-3
 h3 作者
 p #{book_author}
 h3 出版年月
 p #{book_year}年
 h3 页数
 p #{book_pages}页
 h3 定价
 p ¥#{book_price}

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

上面两个页面是bootstrap里最基本的布局,文章就为大家介绍到这,感兴趣的朋友可以继续研究,共同探讨。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
预加载css或javascript的js代码
Apr 23 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
如何封装Vue Element的table表格组件
Feb 06 Vue.js
JS动态增删表格行的方法
Mar 03 #Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 #Javascript
基于javascript html5实现多文件上传
Mar 03 #Javascript
编写高质量JavaScript代码的基本要点
Mar 02 #Javascript
JS获取当前脚本文件的绝对路径
Mar 02 #Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 #Javascript
浅谈JS原型对象和原型链
Mar 02 #Javascript
You might like
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
用PHP读取和编写XML DOM的实现代码
2011/02/03 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
PHP判断表达式中括号是否匹配的简单实例
2016/10/22 PHP
CI(CodeIgniter)框架中URL特殊字符处理与SQL注入隐患分析
2019/02/28 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
详解vue项目首页加载速度优化
2017/10/18 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
使用Python神器对付12306变态验证码
2016/01/05 Python
Python虚拟环境项目实例
2017/11/20 Python
Python使用matplotlib绘制正弦和余弦曲线的方法示例
2018/01/06 Python
pytorch 实现打印模型的参数值
2019/12/30 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
化工工艺专业求职信
2013/09/22 职场文书
茶叶店创业计划书范文
2014/01/19 职场文书
致百米运动员广播稿
2014/01/29 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
六年级作文之家庭作文
2019/12/12 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS