SQL Server2008的安装,SQLServer2008的安装......
2023-02-22 273 安装
简单几步教你学会bootstrap
来源：互联网
2023-02-20 17:10:23 447
Bootstrap 有什么作用呢？来试试
方法/步骤
响应式布局的标题
title>Bootstrap响应式布局/title>
响应式布局的viewport属性，重置窗口大小，会随着窗口的改变而做出改变，我们来试一下
meta name="viewport" content="width=device-width, initial-scale=1">
大盒子 ，我们在里面填充内容“我的第一个 Bootstrap 页面”，如图
div class="jumbotron">
h1>第一个 Bootstrap 页面/h1>
/div>
试一下一行分三列，怎么写呢？我们运行一下
div class="row">
div class="col-sm-4">
h3>第一列/h3>
11111/
11111/
/div>
div class="col-sm-4">
h3>第二列/h3>
222222/
222222/
/div>
div class="col-sm-4">
h3>第三列/h3>
333333/
333333/
/div>
/div>
并没有包围在一行里，这是怎么回事呢？加入container属性试下
div class="container">
div class="row">
div class="col-sm-4">
h3>第一列/h3>
11111/
11111/
/div>
div class="col-sm-4">
h3>第二列/h3>
222222/
222222/
/div>
div class="col-sm-4">
h3>第三列/h3>
333333/
333333/
/div>
/div>
/div>
成功！一列三行。原来是div class="container">属性的作用啊
最后，让我们整体来运行一下，包含jumbotron，如图
div class="container">
div class="jumbotron">
h1>第一个 Bootstrap 页面/h1>
/div>
div class="row">
div class="col-sm-4">
h3>第一列/h3>
11111/
11111/
/div>
div class="col-sm-4">
h3>第二列/h3>
222222/
222222/
/div>
div class="col-sm-4">
h3>第三列/h3>
333333/
333333/
/div>
/div>
/div>
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：Pycharm如何添加快捷外部工具及其图标 下一篇：树莓派系统安装方法
相关文章
