初步使用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 相关文章推荐
JS localStorage实现本地缓存的方法
Jun 22 Javascript
Jquery实现Div上下移动示例
Apr 23 Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 Javascript
JavaScript 学习笔记之数据类型
Jan 14 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
May 27 Javascript
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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
php 禁止页面缓存输出
2009/01/07 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
php实现头像上传预览功能
2017/04/27 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Python+Wordpress制作小说站
2017/04/14 Python
基于Django用户认证系统详解
2018/02/21 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
django自定义模板标签过程解析
2019/12/14 Python
python绘制高斯曲线
2021/02/19 Python
澳大利亚百货商店中销量第一的商务衬衫品牌:Van Heusen
2018/07/26 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
建材业务员岗位职责
2013/12/08 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
股东授权委托书范文
2014/09/13 职场文书
法人代表证明书
2014/09/18 职场文书
党员思想汇报材料
2014/12/19 职场文书
人才市场接收函
2015/01/30 职场文书
股东大会通知
2015/04/24 职场文书
python基础之文件处理知识总结
2021/05/23 Python