Bootstrap 学習メモ (1)_html/css_WEB-ITnose

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

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）表单

         

               

                   

                       

                            文本框：

                           

                               

                           

                       

                       

                            文本域：

                           

                               

                           

                       

                       

                            单选框：

                           

                               

                                   

                                    男

                               

                                   

                                    女

                               

                                   

                                    保密

                           

                       

                       

                            复选框：

                           

                               

                                   

                                    复选框一

                               

                                   

                                    复选框二

                               

                                   

                                    复选框三

                           

                       

                       

                            选择框：

                           

                               

                                   

第一个选择

                                   

第二个选择

                                   

第三个选择

                                   

第四个选择

                                   

第五个选择

                               

                           

                       

                       

                            上传文件：

                           

                               

                           

                       

                       

                           

                                提交

                           

                       

                   

               

           

t; 含める、共通 このスタイルは、コンポーネントを親ラベルのサイズに合わせて拡大します: 提供されているスタイルのいくつかを選択できます。効果を確認します。

4) ナビゲーション

;/ a> #">ショッピング< ;/a>

; 色とフォントを変更するには、独自の CSS ファイルで、対応するクラス情報を追加し、背景色とフォントを変更します。

5) メニュー

実際、ナビゲーションに基づいて、

• ....
のようにメニューを実装する方法があります。ブートストラップによって提供されるデフォルトのメニューでは、ドロップダウン メニューをクリックして表示する必要があることに注意してください。マウスをホバーしたときに表示されるメニューなどを変更する必要がある場合は、いくつかのプラグインを見つける必要があります。ここで、プラグインごとにサポートされるクラスが異なることに注意してください。対応するクラスを見つけてそのスタイルを変更できます。

6) アコーディオン

アコーディオンは実際には左側のナビゲーション メニューを意味します。ブートストラップがデフォルトで提供するものを使用することも、より適切に実装するためのプラグインを見つけることもできます。

ブートストラップの基本的な使用法は非常に簡単ですが、日付選択ボックス、ポップアップ ウィンドウなど、一部の効果がシステムによって提供されていないことがよくあります。これらを実装するには、対応するプラグインを見つける必要があります。より良い日付である datepicker など。プラグインが必要な場合は、多くの場合、jquery プラグインを使用する必要があります。検索エンジンを使用するか、移動します。 http://www.jqueryscript.net/ にアクセスして、目的を達成するための対応するプラグインを見つけてください。

プラグインがニーズを満たせない場合は、css または js を自分で記述する必要があります。一般的に、js は一般的な JQuery ライブラリを使用します。他の JS ライブラリは使用していません。 JQuery のプログラミング経験がある場合は比較的簡単ですが、JQuery 拡張機能を自分で作成する場合は少し難しくなります。JavaScript は通常の言語とは大きく異なるため、習得には時間がかかります。

CSS を学ぶのは難しいことではありません。難しいのは、適切なフォント、色、効果を選択することです。個人的には、CSS のボックス モデルと配置をよく学ぶ必要があると思います。後で時間があればもっと書きます。

Bootstrap の利点は、応答性とブラウザ間の互換性です。CSS を自分で作成したことがある場合は、それがどれほど難しいかがわかるので、今後はしっかりと勉強する必要があります。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：css 改行 indent_html/css_WEB-ITnose次の記事：css 改行 indent_html/css_WEB-ITnose

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について