用Laravel编写了一段时间程序,选择了bootstrap作为前段框架,现在已经有一段时间了,抽空总结一下:
bootstrap是一个前端框架,所谓框架就是为满足特定需要在特定环境下提供的一些有机联系的组件,bootstrap主要提供了一些css组件,就是对页面的html元素,如表单元素(按钮、输入框框、单选、多选)、布局、表格、图片、文字等等进行了一些美化,它提供了一系列的类,只要在html文件中调用相应的class即可。
我刚开始的时候,感觉不知道该如何着手去学习,在网上找了一下,发现好多人都有这个问题,后来找了一本英文的电子书,照本宣科实际写了几个Html文件,才明白到底是什么原因。我本身对后端比较了解,但是对前段了解甚少,加上很久不研究技术了,所以对前端的发展了解甚少,所以才不知道如何学习。比如我在学Laravel框架时,我很了解Java的SSH的具体结构,所以对于Laravel的路由、控制器、表示层、ORM层、过滤器等等大致了解一下,就知道如何使用了,所以我对bootstrap不知道如何学习的原因是因为我对html、css缺乏了解,才会如此。我觉得学习和查询html、css以及Jquery最好的资源是W3cSchool(
http://www.w3school.com.cn/index.html),我从中收获很大。
等学了一段时间,就发现其实官方文档都写的很详细了,其基本准备工作就是在页面中引用bootstrap.css就可以了,某些动态效果需要配合jquery来实现,再加上jquery.js的引用就可以了,这些在官方文档的“起步”都写的很清楚了,下载源码,再将标准的模板拷贝下来,就是可以开始了,下一步就是浏览“组件”,寻找自己需要的组件,比如布局、表格、表单组件等,适当调整一下类,就可以产生非常不错的外观,最好使用能够提示css、js的IDE,常见的有netbeans和Aptana,当然Jetbrain公司的工具phpstorm和webstorm会更好一些,不过是收费的。我比较喜欢netbeans。
学习bootstrap的最好方法就是实际的去实现需要的效果,但是css定义是非常复杂的,有几点需要注意:
- CSS的优先级:CSS的定义是可以累加覆盖的,所以其优先级非常重要。
CSS一般会放置在三个地方:
1)外部文件:即css文件
2)本文件定义:即html文件中的定义,大致类似
<style type="text/css">
body {
background-color: #FFFFFF;
}
body, td, th {
color: #999999;
}
</style>
3)所在标签的style定义,如<div style='height:3em;background-color:#fff'></div>
优先级是3)>2)>1)
如果是在同一优先级的情况下,有两种情况需要注意
1)定义的越准确,最终就会使用哪个定义,如
<div class='test1 test2'></div>
如果同一级别有两个定义
.test1{}
div.test1{}
会采用后者,前者被覆盖
2)同一级别,优先级相同的情况下,看书写的先后顺序,
如上面test1 test2,如果定义了同一种颜色,如果在文件中哪个定义越靠后,最终选择的原色就是哪一种,如
.test2{}
.test1{}
这种情况下,使用的类test1的颜色,所以最终的效果和<div>中的class书写的先后顺序无关,这一点通常不重要,但有时候需要注意。
2. 调试工具
目前来说,所有的浏览器都支持F12调试,IE、Chrome、Firefox、Opera都支持,比较常用的是Firefox的Firebug插件,当然其他浏览器也支持类似的功能,Firebug的亮点是有一个点选的功能,可以直接看到页面元素的大小,IE不仅仅支持显示元素的边框边距,还支持显示元素的偏移,这有时候也非常有用。它们都支持右键“审查元素”,可以得到元素的对应的html信息,这些信息是都动态的,js或鼠标事件都会直接反映在这些工具里,这一点对于js和ajax调试非常重要,因为右键显示源代码不会显示这些改变。
常见的有以下几种:
1)布局:主要是用div将页面分成几块,常见的方式如下
<div class='row'>
<div class='col-md-4'></div>
<div class='col-md-4'></div>
<div class='col-md-4'></div>
</div>
bootstrap将页面分为12个部分,支持各种屏幕大小,通过嵌套这种格式,就可以支持大多数的显示要求。
2)表格
<table class='table table-bordered'>
<thead>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</thead>
<tbody>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</tbody>
</table>
bootstrap提供了很多样式,不过表格相对来说,非常简单,可以自己定义一些css来美化一下
3)表单
<div class="row">
<div class="col-md-offset-4">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputtext" class="col-md-2 control-label">文本框:</label>
<div class="col-md-3">
<input type="text" class="form-control input-lg" id="inputtext" placeholder="请输入文本文字">
</div>
</div>
<div class="form-group">
<label for="inputtext" class="col-md-2 control-label">文本域:</label>
<div class="col-md-4">
<textarea class="form-control" rows="3" placeholder="在这里说点什么吧!"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputtext" class="col-md-2 control-label">单选框:</label>
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
男 </label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
女 </label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
保密 </label>
</div>
</div>
<div class="form-group">
<label for="inputtext" class="col-md-2 control-label">复选框:</label>
<div class="col-md-4">
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1">
复选框一 </label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2">
复选框二 </label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3">
复选框三 </label>
</div>
</div>
<div class="form-group">
<label for="inputtext" class="col-md-2 control-label">选择框:</label>
<div class="col-md-2">
<select class="form-control">
<option>第一个选择</option>
<option>第二个选择</option>
<option>第三个选择</option>
<option>第四个选择</option>
<option>第五个选择</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputtext" class="col-md-2 control-label">上传文件:</label>
<div class="col-md-3">
<input type="file" name="upload_file">
</div>
</div>
<div class="form-group">
<div class="col-md-3 col-md-offset-2">
<button name="submit" class="btn btn-success btn-radius form-control">提交</button>
</div>
</div>
</form>
</div>
</div>
上面大致包含了一些常见的组件,form组件必须用form标签包含,每一个表单组件用<div class='form-group'></div>来包含,常见的组件样式是form-control,这个样式将组件拉伸到父标签大小,即width:100%,相对来说表单也挺简单的,可以选择一些提供的样式看看效果。
4)导航
<nav class="navbar navbar-inverse" role="navigation" >
<div class="container" >
<ul class="nav navbar-nav navbar-right" >
<li><a href="#">Home</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Customer</a></li>
<li><a href="#">Shopping</a></li>
</ul>
</div>
</nav>
导航使用标准的格式就可以了,如果需要修改颜色、字体,需要在自己的css文件中,增加对应类的信息,修改背景色和字体。
5)菜单
菜单的实现有很多种,其实就是在导航基础上,在<li></li>增加<ul><li>....</li></ul>的内容,需要注意的是,bootstrap默认提供的菜单是需要点击才能出现下拉菜单,如果需要更好的体验,如鼠标悬浮就出现菜单,需要寻找一些插件,如果需要修改颜色,需要修改对应的css样式,这里需要注意,不同的插件支持的类不一样,可以通过调试工具找到相应的类,修改其样式。
6)手风琴
手风琴,其实就是左侧导航菜单的意思,bootstrap默认提供的就可以用了,也可以寻找一些插件更好的实现。
bootstrap的基本使用是非常简单的,但是往往会发现某些效果系统没有提供,如日期选择框、弹出窗口等,这些需要去寻找相应的插件来实现,如datepicker是较好的日期控件,弹出窗口就更多了,需要插件的时候往往需要动态效果的时候,往往要借助jquery插件,可以通过搜索引擎或者到
http://www.jqueryscript.net/去寻找相应的插件,来完成你的任务。
如果插件不能满足你的需求,就需要自己写css或者js了,js一般来说都会使用常见的JQuery库,其他的JS库我还没有用过。JQuery有编程经验的话,还是比较容易的,如果要自己写JQuery扩展就稍微难一些了,因为javascript和通常的语言差别较大,需要一段时间学习才行。
CSS的学习并不难,难在选择合适的字体、颜色和效果,这都需要一点点的去尝试,个人觉得应该好好学习css的框模型、定位,可以做出很多比较好的效果,以后有空再写一些。
bootstrap是值得学习的,其优势是响应式和跨浏览器兼容性好,如果自己写过css就会知道做到这些有多困难,所以以后还是好好学习吧。
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap学习笔记博客
本片博客用于记录之后要用到Bootstrap的学习笔记 概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...
- bootstrap学习笔记--bootstrap安装环境
Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 ...
- Bootstrap学习笔记系列1-------Bootstrap网格系统
Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...
- bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得 ...
- bootstrap 学习笔记
bootstrap作为当下的流行框架不知道它怎么能行呢? 之前也看过好多bootstrap的网上教程,可是发现光看真的记不住,说起来也真是忧桑~重点还是要自己做才是真正的印象深刻.后来我发现解析模板是 ...
随机推荐
- MATLAB 大数据剔除坏值
在用MATLAB进行数据分析的时候,坏点对正确结果的影响比较大, 因此,我么需要剔除野点,对于坏值的剔除,我们 利用 3σ准则 剔除无效数据: 3σ准则又称为拉依达准则,它是先假设一组检测数据只含有 ...
- 关于SpringBoot bean无法注入的问题(与文件包位置有关)改变自动扫描的包
原因:同事在写demo时出现bean加了@component后却无法被spring扫描到(在编译的时候IDEA就提示拿不到对应的bean)的问题. 后来经过研究是跟文件包的位置有关的. springb ...
- WPF开发的彩票程序(练手好例子) 附源码
前言 WPF是.NET最新的界面开发库,开发界面非常灵活!但是学习WPF难度也非常大. 应朋友之邀,编写了一个小程序.程序虽小,五脏俱全,WPF开发的灵活性可窥见一斑. 对于新手学习有很好的借鉴意义, ...
- 数据库索引------B-Tree 索引和 Hash 索引的对比
对于 B-tree 和 hash 数据结构的理解能够有助于预测不同存储引擎下使用不同索引的查询性能的差异,尤其是那些允许你选择 B-tree 或者 hash 索引的内存存储引擎. B-Tree 索引的 ...
- 魔术常量(Magic constants)
魔术常量(Magic constants) PHP中的常量大部分都是不变的,但是有8个常量会随着他们所在代码位置的变化而变化,这8个常量被称为魔术常量. __LINE__,文件中的当前行号 __FIL ...
- 高质量PHP代码的50个实用技巧必备(下)
26. 避免直接写SQL, 抽象之 不厌其烦的写了太多如下的语句: ? 1 2 <span style="color:#333333;font-family:''Helvetica, ...
- 深入理解php内核 编写扩展 II:参数、数组和ZVALs
原文:http://devzone.zend.com/article/1022-Extension-Writing-Part-II-Parameters-Arrays-and-ZVALs Part I ...
- 移动GIS未来的前景GIS解决方案应用
目前,在我国一些发达地区,移动GIS所需的两个技术前提——移动互联网的普及和智能终端的普及都已经得到了满足,特别是平板电脑.智能手机的流行,苹果产品的风靡,为移动GIS的应用提供了肥沃的土壤,而GIS ...
- CentOS7操作系统参数优化
生产环境配置需要标准化,将常用操作写成脚本用于操作系统的初始化. #!/bin/bash #Date:2017 #This Script is for centos7.3 init #01.配置yum ...
- linux上kafka模拟客户端发送、接受消息
producer 消息的生成者,即发布消息 consumer 消息的消费者,即订阅消息 broker Kafka以集群的方式运行,可以由一个或多个服务组成,服务即broker zook ...