脚本宝典收集整理的这篇文章主要介绍了移动Web开发之Bootstrap (Web框架),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
一、为什么使用Bootstrap?
二、如何使用Bootstrap?
三、布局容器
3.1 container类
3.2 container-fluid类
四、栅格系统
4.1栅格选项参数
4.2 列嵌套
4.3 列偏移
4.4 列排序
4.5 响应式工具
1.标准化的html+css编码规范
2.提供一套简洁,直观,强悍的组件
3.有自己的生态圈,不断的更新迭代
4.让开发更简单。提高了开发的效率
下载网址:Bootstrap中文网Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。目前,Bootstrap最新版本为3.0 。Bootstrap中文网致力于为广大国内开发者提供详尽的中文文档、代码实例等,助力开发者掌握并使用这一框架。https://www.bootcss.com/
简单的四步曲,快速上手使用bootstrap:
1.创建文件夹结构
2.创建html骨架结构
3.引入相关样式文件
4.书写内容
注意:新建bootstrap文件夹并把下载的css,fonts,js文件夹放入
文件夹结构示例图如下:
引入相关样式文件:
响应式布局的容器,固定宽度
屏幕尺寸 | 尺寸设置 |
超小屏 | 小于768px 宽度设置为100% |
小屏幕 | 大于等于768px 宽设为750px |
中等屏幕 | 大于992px 宽设为970px |
大屏幕 | 大于等于1200px 宽设为1170px |
流式布局容器 百分百宽度,占据全部视口的容器,适合于单独做移动端开发。
使用方法:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div>
</div>
</div>
特别提醒:列嵌套最好加一个行row这样可以取消父元素的padding值而且高度自动和父级一样高
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<div class="col-md-4">a</div>
<div class="col-md-8">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
</body>
使用.col-md-offest-*类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边距
偏移的份数就是12减两个盒子的份数
代码展示:
//css部分
<style>
.row div {
height: 50px;
background-color: pink;
}
</style>
//html部分
<body>
<div class="container">
<div class="row">
<div class="col-md-4">左侧</div>
<div class="col-md-4 col-md-offset-4">右侧</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>
</div>
</body>
用.col-md-push-*和.col-md-pull-*类就可以很容易的改变列顺序
代码展示:将左右盒子位置互换
//css部分---------------------
<style>
.row div {
border: 1px solid purple;
height: 50px;
background-color: pink;
}
</style>
//html部分--------------------
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8">左侧</div>
<div class="col-md-8 col-md-pull-4">右侧</div>
</div>
</div>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
.row div {
height: 300px;
background-color: purple;
}
.row div:nth-child(3) {
background-color: pink;
}
span {
font-size: 50px;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">
<span class="visible-lg">我会显示</span>
</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md hidden-xs">我会隐藏</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
</html>
最后,container 提供了一个15px的padding,row 是 column 直接存在的容器,row 默认最多可有12个 column,也能消除container属性默认的padding值。
以上是脚本宝典为你收集整理的移动Web开发之Bootstrap (Web框架)全部内容,希望文章能够帮你解决移动Web开发之Bootstrap (Web框架)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。