bootstrap底部导航栏 bootstrap遮罩层( 二 )


</body>
</html>
3. 它是怎么组成一个布局?
首先Bootstrap是一个响应式布局框架,我们都知道一个框架里面必有一个容纳其他内容的东西,这个东西叫容器 。在Bootstrap中我们用的是container class(在Bootstrap中我们通常在class这个类中写样式),在这个容器中,它是有固定宽度(但是所谓固定宽度并不允许我们设置容器的宽度,而是bootstrap内部通过bootstrap.css根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,为什么设置宽度的时候都要以百分比来设置因为能充分的能够体现自适应的 。这是容器的使用图片我们看一下:
我们知道一个完美布局不单单是主要有一个简单的容器,如果我们这样想纯属于贬低它 。在此不得不提到一个名字:栅格系统也可以叫做网格系统,我们可以看看网格系统整个布局图片:
我们可以根据这张布局图片这属于container的内部布局,网格系统包括 row(行),column(列),在图片1中我们可以看到行和列 。
首先row行我们包括十二个column列相当于十二个网格(每个网格对应一个列),如图二所示每个column列也有十二个网格,每个网格能放十二个column列 。一般的网页布局都是按着 2-8-2(column列)来给网页布局的!我们也可以用不同的布局来表达自己的逻辑!
下面这张图是在768像素到992像素之间的通用的布局 *** col-md-1,这个(1)代表的是一个网格相当一个列(column) 。
以下就是Bootstrap的几点各种屏幕自适应响应式的样式大家了解一下对今后的网页布局很有帮助!
4. 它是用来干什么的?
随着各种计算机的问世,屏幕大小,网页界面不适合屏幕的,这让我们这些前端工程师很是头痛 。
Bootstrap的问世解决了很多的问题,首先我们的页面不用更换,它可以适用各种屏幕的大小(我们可以不用担心不同的屏幕换不同的网页的问题) 。通过框架布局我们可以迅速的做出一个既美观逻辑又清晰的网页来 。我们来看一下完整的Bootstrap页面!
下面的网页是正常大小 。
下面的网页是屏幕缩小的大小
Bootstrap能调用CSS、JavaScript对没有美工处理的网站修饰充分的展现出他们的美感与简约的动感 。
Bootstrap大多数被用来做一些内容不是太复杂的门户网站,比如 *** 、京东、管理系统等页面在PC端和移动端根据屏幕的大小,来自适应的网页布局(一般来说PC端的网站比移动端的网站内容比较多,这跟屏幕大小的自适应有关) 。使网民更加的对网站有印象,让网民对网页一目了然,就知道这个网页具体想表达哪些内容 。这样的网页一般应用于简约的门户网站 。
5. Bootstrap的局限性
总体来说bootstrap不太适合做那些页面布局很复杂,内容较多,特别炫酷的网站,因为bootstrap已经写好CSS的样式了所以引用bootstrap要改css样式,组件,插件太多了,还容易造成代码混乱,还不如直接不用更快,特别是对于新手前端工程师是来说更不推荐使用,但是它很适合做那些企业内部的网站,一般此类网站不会对页面的布局没有过多的要求,只要体现主要功能即可,bootstrap就完全是切合此类网站的特性 。
作者赠言:
想要学习Bootstrap的机灵鬼们,还在犹豫什么?如此实用简单的框架难道还不值得我们青睐吗?
如果有什么不对的地方欢迎大家指出,毕竟本人才疏学浅,欢迎大家指出问题所在,相互学习共赢互利!
世上无难事只怕有心人,世上本没路人走的多了就有了,期待我们更上一层楼!

推荐阅读