首页 >> 秀友百科词条 >> 技术开发测试 >> bootstrap框架使用教程

bootstrap框架使用教程[编辑]


概述
bootstrap框架使用教程是介绍一些bootstrap框架的学习技巧和方法,教导使用者,帮助使用者对bootstrap更加熟悉和操作。

一、简介

Bootstrap来自 Twitter,是Twitter推出的一个用于前端开发的开源工具包,Bootstrap是基于HTML5和CSS3开发的,它在jQuery的基础上进行了更为个性化和人性化的完善。

二、熟悉结构与组成

1. Bootstrap CSS: 概览, 网格系统, 排版,代码, 表格,表单,按钮, 图片,辅助类,响应式实用工具。

2. Bootstrap 布局组件: 字体图标,下拉菜单, 按钮组, 按钮下拉菜单, 输入框组, 导航元素, 导航栏,面包屑导航,分页,标签, 徽章,超大屏幕,页面标题等。

3. Bootstrap 插件:插件概览,过渡效果,模态框,下拉菜单,滚动监听, 标签页,提示工具, 弹出框,警告框, 按钮, 折叠, 轮播, 附加导航等。

三、如何在html使用

1. 利用搜索引擎,到bootstrap官方网站下载bootstrap,打开解压包之后可以发现包含三个文件夹 css、fonts、js。

2. 到官网下载jQuery,因为Bootstrap需要jQuery支持。

3. 将下载后的就jQuery放到bootstrap中的js目录。

4. 在bootstrap的根目录下新建一个demo.html文件,编辑demo.html文件,添加对bootstrap框架中css和js的引用,写好源码,在写源码时,要注意格式,编辑的规范。

5. bootstrap框架的基本使用架构,即可在html中加载使用。

四、编码规范

1. Bootstrap CSS编码规范

用两个空格来代替制表符(tab);为了获得更准确的错误报告,每条声明都应该独占一行;为了代码的易读性,在每个声明块的左花括号前添加一个空格;尽量使用简写形式的十六进制值例如,用 #fff 代替 #ffffff;避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;;注意声明顺序,第一是Positioning,最后是Visua;不要使用 @import,会增加请求次数;将媒体查询放在尽可能相关规则的附近;class命名要清晰明了。

2. Bootstrap HTML编码规范

嵌套元素应当缩进一次;对于属性的定义,确保全部使用双引号,绝不要使用单引号;不要省略可选的结束标签,例如,</li> 或 </body>;尽量避免多余的父元素;使用明确声明字符编码,能够确保浏览器快速;在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性。

五、建议

可注册twitter账号,登陆后,可关注相关网站,了解更多相关的知识,方便操作使用。

参考资料:
扩展阅读:
相关词条:
合作编辑: 陈智聪 

秀友百科词条内容均由网友提供,仅供参考。如发现词条内容有问题,请联系管理员。

词条信息

浏览次数:0

编辑次数:0历史版本

创建者: 陈智聪

最近更新:2016/11/4 12:07:44

关于秀友百科| 版权声明| 联系方式| 常见问题

秀友百科是网络营销能力秀指定的教学实践平台

深圳市竞争力科技有限公司版权所有