如何用bootstrap进行页面布局

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

  • 5
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap页面布局是指通过使用Bootstrap框架提供的网格系统和容器来布置和组织网页内容的方法。Bootstrap的网格系统以12列为基础,可以将网页平分为不同的栏,在不同的设备上展示不同的列数。这样的布局可以使网页在不同的设备上呈现出良好的响应式效果。 在Bootstrap中,页面布局的基本结构是使用容器(container)和行(row)进行包裹。容器用来控制列的宽度和在不同设备上的显示方式,行用来包含列,并在一行中平均分配列的宽度。列(col)则是具体的网格单元,用来放置网页内容。可以通过使用.col-*-*来指定列的宽度和在不同设备上的显示方式。 除了手动控制列的宽度和显示方式外,Bootstrap还提供了自动处理布局的方式。通过在行中只使用.col来让Bootstrap自动处理布局,会使得列自动平均分配宽度并且自动适应不同的设备。 总结来说,Bootstrap页面布局是通过使用网格系统和容器来规划和组织网页内容的方法。它可以使网页在不同设备上呈现出良好的响应式效果,提供了灵活和简单的布局方式,使开发者能够更轻松地创建出漂亮且适配不同设备的网页。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Bootstrap页面布局基础知识全面解析](https://download.csdn.net/download/weixin_38597970/12796637)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [bootstrap第二章:bootstrap布局](https://blog.csdn.net/qq_62244121/article/details/127375332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值