如何用bootstrap进行页面布局

最新推荐文章于 2024-06-01 00:10:59 发布

HNQ_1102

最新推荐文章于 2024-06-01 00:10:59 发布

阅读量1.5w

点赞数 5

分类专栏：菜鸟文章标签：菜鸟无限水

本文链接：https://blog.csdn.net/weixin_44552856/article/details/86534755

版权

24 篇文章 0 订阅

订阅专栏

如何用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框架，这样就能节省大量的时间，让程序员集中精力去思考逻辑处理

关注