- 1、本文档共7页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
HTML5前端框架Bootstrqp使用
HTML5 前端框架 Bootstrap 使用
1. 简介
Bootstrap是Twitter推出的一个开源的前端框架。
Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发,由动态语言Less写成。它是一套“易用、优雅、灵活、可扩展”的前端工具集,提供了优雅的HTML/CSS规范。
Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括MSNBC(微软全国广播公司)的Breaking News都使用了该项目。
Bootstrap兼容于所有主流浏览器,包括各种移动设备。
2. 下载和使用
Bootstrap建立了一个响应式的12网格布局系统,它引入了fixed和fluid-with两种布局方式,可以快速构建Web应用。目前Bootstrap最新版本为3.0.0,可以在Bootstrap的官方网站/bootstrap/上下载源码。
Bootstrap使用非常简单,打开任何文本编辑器,新建一个文件并命名为:test.html, 在该文件开始处添加Bootstrap框架代码:
!DOCTYPE html
html lang=en
head
script src=jQuery.js/script
script src=bootstrap.js/script
link href=bootstrap.css rel=stylesheet
/head
从上面的代码可以看到:Bootstrap基于JQuery构建,所以需先引入JQuery。Bootstrap框架代码包括了bootstrap.js和bootstrap.css两个文件。
然后,我们可以将如下代码替换body元素的内容:
body
div class=container-fluid
div class=row-fluid
div class=span3
div class=well sidebar-nav
ul
lia href=#link/a/li
lia href=#link/a/li
lia href=#link/a/li
lia href=#link/a/li
lia href=#link/a/li
lia href=#link/a/li
lia href=#link/a/li
/ul
/div
/div
div class=span9
div class=hero-unit
h1Hello world!/h1
/div
/div
/div
/div
/body
上面的代码中,我们采用流式布局构建,将页面分成两部分:左边是7个链接,占3个宽度;右边是一个Hello world的标题,占9个宽度。效果如下:
图1
对上面的Hello world应用稍作改变,我们可以实现一个简单的HTML5介绍网站。将test.html页面的body元素中的内容替换成如下代码:
body
div class=container-fluid
div class=row-fluid
div class=span3
div class=well sidebar-nav
ul class=nav nav-list
li class=nav-headerSections/li
lia href=#HTML5 Introduction/a/li
lia h
您可能关注的文档
- 安全生产的管理知识考前检测题2010年版.doc
- GIS毕业文论格式模板.doc
- gc税收信息化应用系统.doc
- gh学校信访稳定工作小结.doc
- 安全生产的管理知识考试题.doc
- gjt2f列系金属探测仪.doc
- GLM国际流物师资格认证项目.doc
- 安全生产知竞识赛答题.doc
- 安全生产知能识力测试2.docx
- GMAT写入作门知识库整理.docx
- [苏州]江苏苏州市职业大学长期招聘博士研究生专业技术人才75人笔试上岸试题历年高频考点难、易错点附带答案详解.docx
- 2024年河北沧州市中心医院招考聘用实用型人才笔试上岸试题历年典型考题与考点剖析附带答案解析.docx
- [舟山]浙江舟山市海洋经济发展局编外工作人员招聘笔试上岸试题历年高频考点难、易错点附带答案详解.docx
- 2024年福建厦门医学院附属海沧医院辅助岗位人员招考聘用16人笔试上岸试题历年典型考题与考点剖析附带答案解析.docx
- 2024年辽宁大连医科大学附属第三医院暨大医二院普湾院区招考聘用141人笔试上岸试题历年典型考题与考点剖析附带答案解析.docx
- [郴州]2024年湖南郴州市汝城县招聘教师20人笔试上岸试题历年高频考点难、易错点附带答案详解.docx
- [襄阳]2024年湖北襄阳市第一中学等五所学校招聘教师43人笔试上岸试题历年高频考点难、易错点附带答案详解.docx
- [酒泉]2024年甘肃酒泉市公安局招聘留置看护岗位辅警44人笔试上岸试题历年高频考点难、易错点附带答案详解.docx
- [贵阳]2024年贵州贵阳市卫生健康系统招聘大学生乡村医生17人笔试上岸试题历年高频考点难、易错点附带答案详解.docx
- [郑州]2024年河南郑州大学第五附属医院护理人员招聘60人笔试上岸试题历年高频考点难、易错点附带答案详解.docx
文档评论(0)