Bootstrap学习笔记(一)

用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定义是非常复杂的，有几点需要注意：

1. 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就会知道做到这些有多困难，所以以后还是好好学习吧。