如何用bootstrap进行页面布局
开发工具与关键技术:DW2017 bootstrap框架的使用
作者:胡宁淇
撰写时间:2019年1月17日
Bootstrap是一个框架,里面封装一些页面布局常用到的代码
在这个橙色的框内有各种封装好的一些样式,比如a标签,input标签,下拉框,接下来我们就来我们就用这个框架来构建一个简单的页面,在使用bootstrap之前我们先要把bootstrap引入我们的项目,我们引用的是bootstrap中的bootstrap.min.css
看到这张图片我们可以把它分成几个部分
我们用container容器来装下整个内容
接下来就是头部,头部我们是用了bootstrap里面的一个警示框样式,直接把代码复制过来
第一行里面又有两列,给div标签的类名·都是bootstrap封装好的样式,不过要使用这些类
一定要先把bootstrap.min.css引用进来
这就是上图代码所实现的效果
下面内容的布局与以上布局基本一致,只需稍微改动里面的标签,在此就不再一一赘述
为了使页面更加花里胡哨,便给container和其他标签设置了一些样式。
在使用bootstrap之后我们可以看到css的代码量并不多,我们不用再去书写大量的代码,只需要学会如何使用
Bootstrap框架,这样就能节省大量的时间,让程序员集中精力去思考逻辑处理