初步使用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 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 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
php4的session功能评述(三)
2006/10/09 PHP
php 处理上百万条的数据库如何提高处理查询速度
2010/02/08 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
thinkphp使用literal防止模板标签被解析的方法
2014/11/22 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php实现记事本案例
2020/10/20 PHP
用javascript实现点击链接弹出"图片另存为"而不是直接打开
2007/08/15 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python求解平方根的方法
2015/03/11 Python
python实现停车管理系统
2018/11/30 Python
pytest中文文档之编写断言
2019/09/12 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
Python日志器使用方法及原理解析
2020/09/27 Python
Python系统公网私网流量监控实现流程
2020/11/23 Python
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
青年志愿者先进事迹
2014/05/06 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
经典导游欢迎词
2015/01/26 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL