基于bootstrap的网页开发

1、bootstrap是一款简洁强大的前端开发框架,它是移动设备优先的。针对不同的移动设备,都有良好的显示效果和用户体验。核心内容:bootstrap内置了一套响应式移动设备优先的流式栅格系统。随着屏幕设备和视口(viewport)尺寸的增加,系统会自动分为最多12列的栅格系统,bootstrap用于通过一系列的行和列的组合来创建页面布局,页面的内容可以放置在创建好的布局中。

2、栅格系统的工作原理:行必须包含在container的容器中,列作为行的直接子元素,内容放置在列中。通过设置padding等,在列与列之间产生一些间隔。最后通过为第一列和最后一列设置负的margin,从而抵消掉padding的影响。在栅格系统中,列是通过指定1-12的值,来表示其跨越的范围。栅格的class在大于或等于阈值的设备上起作用,并且覆盖针对小屏幕设置的class。因此针对不同大小的屏幕会产生不同的显示效果。

3、bootstrap包含许多可以复用的组件,如图标,下拉菜单,导航,警告框,弹出框,基本能满足大部分web开发的使用。

4、bootstrap包含一系列jQuery插件,使用时,可以直接引入bootstrap.js。这样就可以在页面中使用js插件,使用js插件的方法,使用data属性,把页面中的一些元素设置data属性,几乎不需要写一行js代码就可以实现一些插件的功能。另外也可以使用一些链式调用的方式来实现js功能。

5、定制bootstrap,可以通过官方的页面,定制一份属于自己的bootstrap。

猜你喜欢

转载自blog.csdn.net/lgl_19910331/article/details/81783264