Bootstrap study notes (1)_html/css_WEB-ITnose-HTML Tutorial-php.cn

Bootstrap study notes (1)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:53:51

Original

1145 people have browsed it

用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文件中的定义，大致类似

3）所在标签的style定义，如

优先级是3)>2)>1）

如果是在同一优先级的情况下，有两种情况需要注意

1）定义的越准确，最终就会使用哪个定义，如

如果同一级别有两个定义

.test1{}

div.test1{}

会采用后者，前者被覆盖

2）同一级别，优先级相同的情况下，看书写的先后顺序，

如上面test1 test2，如果定义了同一种颜色，如果在文件中哪个定义越靠后，最终选择的原色就是哪一种，如

.test2{}

.test1{}

这种情况下，使用的类test1的颜色，所以最终的效果和

中的class书写的先后顺序无关，这一点通常不重要，但有时候需要注意。

2. 调试工具

目前来说，所有的浏览器都支持F12调试，IE、Chrome、Firefox、Opera都支持，比较常用的是Firefox的Firebug插件，当然其他浏览器也支持类似的功能，Firebug的亮点是有一个点选的功能，可以直接看到页面元素的大小，IE不仅仅支持显示元素的边框边距，还支持显示元素的偏移，这有时候也非常有用。它们都支持右键“审查元素”，可以得到元素的对应的html信息，这些信息是都动态的，js或鼠标事件都会直接反映在这些工具里，这一点对于js和ajax调试非常重要，因为右键显示源代码不会显示这些改变。

常见的有以下几种：

1）布局：主要是用div将页面分成几块，常见的方式如下

bootstrap将页面分为12个部分，支持各种屏幕大小，通过嵌套这种格式，就可以支持大多数的显示要求。

2）表格

bootstrap提供了很多样式，不过表格相对来说，非常简单，可以自己定义一些css来美化一下

3）表单

文本框：

文本域：

单选框：

男

女

保密

复选框：

复选框一

复选框二

复选框三

选择框：

上传文件：

to include. The common component style is form-control. This style stretches the component to the size of the parent tag, that is, width: 100%. The form is relatively simple. You can choose some provided style to see the effect.

4) Navigation