Bootstrap 的基本使用
一、Bootstrap简介
Bootstrap 是目前受欢迎的前端框架之一,是基于HTML,CSS,JavaScript的,它简洁灵活,使web开发更加快捷
中文官网:http://www.bootcss.com/
官网:http://getbootstrap.com/
推荐:https://v3.bootcss.com/
1.优点
2. 版本
二、 Bootstrap 使用
控制权在框架本身,使用者要安装框架所规定的某种规范进行开发
Bootstrap 使用四部曲:
2.1 创建文件夹结构
2.2 创建html骨架结构
2.3 引入相关样式文件
2.4 书写内容
三、Bootstrap 布局容器
四、Bootstrap 栅格系统
4.1 栅格系统简介
注意:
rem 是把整个屏幕划分为若干等份
而栅格系统是把页面内容划分为若干等宽的列
不同屏幕下container一定会进行一个缩放的效果,这时候把container划分为12等份,如果是在大屏幕下,每列的宽就会变宽了,那么内容就会相对大一些,如果container变小了,每列的宽度也会跟着变小了,页面的内容就会发生相应的缩放,就会实现缩放的效果
总结:在BootStrap中,是把整个大的容器 container划分为12等份,container宽度不同,那么每一列的宽度也会不同,页面的内容也会随着宽度的变化而发生缩放的效果
4.2 栅格选项参数
4.3 栅格系统的基本使用
基本使用(一)
栗子:
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
我们发现,这些 div 并没有平均分成 4 等份,想要实现列的平均划分,需要添加类前缀
我们当前是在大屏幕下,所以类前缀是 .col-lg
4个盒子平均占满12等份,每个盒子占3份
- 如果子元素的 份数相加等于12,那么子元素就能占满整个 container 的宽度
栗子:
<style>
[class^=col]{
border: 2px solid pink;
}
</style>
<div class="container">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
栗子2:
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
- 如果孩子的份数相加 小于12,那么就占不满整个宽度
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
3. 如果孩子的份数相加 大于12 ,多余的那一列会另起一行来显示
<div class="container">
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
基本使用(二)
栗子1: 在中等屏幕下,让孩子各占 4份
<div class="container">
<div class="col-lg-3 col-md-4">1</div>
<div class="col-lg-3 col-md-4">2</div>
<div class="col-lg-3 col-md-4">3</div>
<div class="col-lg-3 col-md-4">4</div>
</div>
栗子2: 在小屏幕下,让孩子占6份
<div class="container">
<div class="col-lg-3 col-md-4 col-sm-6">1</div>
<div class="col-lg-3 col-md-4 col-sm-6">2</div>
<div class="col-lg-3 col-md-4 col-sm-6">3</div>
<div class="col-lg-3 col-md-4 col-sm-6">4</div>
</div>
栗子3:在超小屏幕下,每个孩子占 12 份
<div class="container">
<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>
4.4 栅格系统的列嵌套
栗子:
<style>
.container>div{
height: 50px;
background-color: pink;
}
.row>div {
height: 50px;
background-color: pink;
/* margin: 0 10px; */
}
</style>
<body>
<div class="container">
<div class="col-md-4">
<div class="row">
<div class="col-md-6">a</div>
<div class="col-md-6">b</div>
</div>
</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</body>
4.5 栅格系统的列偏移
栗子1: 两个盒子贴边
<style>
.container div {
height: 50px;
background-color: pink;
}
</style>
<body>
<div class="container">
<div class="col-md-3">左侧</div>
<!-- 偏移的份数 就是 12 - 两个盒子的份数 = 6 -->
<div class="col-md-3 col-md-offset-6">右侧</div>
</div>
</body>
栗子2: 盒子水平居中
<div class="container">
<!-- 如果只有一个盒子 那么就偏移 = (12 - 6) /2 = 6 -->
<div class="col-md-6 col-md-offset-3">中间</div>
</div>
4.6 栅格系统列排序
栗子: 左侧右侧交换
没有排序之前:
<div class="container">
<div class="col-md-4">左侧</div>
<div class="col-md-8">右侧</div>
</div>
排序之后:
<div class="container">
<div class="col-md-4 col-md-push-8">左侧111</div>
<div class="col-md-8 col-md-pull-4">右侧222</div>
</div>
4.7 响应式工具
栗子:隐藏
<style>
.row div {
height: 300px;
background-color: purple;
color: red;
font-size: 20px;
}
.row div:nth-child(3) {
background-color: pink;
color: red;
font-size: 20px;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3">1</div>
<div class="col-xs-3">2</div>
<div class="col-xs-3 hidden-md">我可是会隐藏的哦!!!</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
只在中等屏幕下隐藏,其他屏幕下不会隐藏
栗子:显示
<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">3</div>
<div class="col-xs-3">4</div>
</div>
</div>
</body>
span的文字只有在大屏才显示,其他屏幕下不显示
Bootstrap 的基本使用的更多相关文章
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- 旺财速啃H5框架之Bootstrap(三)
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 旺财速啃H5框架之Bootstrap(二)
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 旺财速啃H5框架之Bootstrap(一)
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- [BootStrap] 富编辑器,基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...
随机推荐
- nginx 负载均衡设置
upstream lucky5{ server 127.0.0.1:3000 weight=10; server 127.0.0.1:3001 weight=5; } server{ location ...
- mysql密码问题
这位老哥的: 版权声明:本文为CSDN博主「csdn-华仔」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/ ...
- ASP.NET Core管道详解[3]: Pipeline = IServer + IHttpApplication
ASP.NET Core的请求处理管道由一个服务器和一组中间件构成,但对于面向传输层的服务器来说,它其实没有中间件的概念.当服务器接收到请求之后,会将该请求分发给一个处理器进行处理,对服务器而言,这个 ...
- kail下安装RsaCtfTool
最近做了一些RSA的ctf题目,感觉在RsaCtfTool是很麻烦的事,但是发现在kali上安装下载非常简便,所以找一了一些教程,总结一下 参考链接:http://www.sohu.com/a/257 ...
- 深度分析:Java并发编程之线程池技术,看完面试这个再也不慌了!
线程池的好处 Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序都可以使用线程池.在开发过程中,合理地使用线程池,相对于单线程串行处理(Serial Processing ...
- 从递归到memo到动态规划
//memo,记忆化搜索 class Solution { int[][] memo; public boolean wordBreak(String s, List<String& ...
- Spring 对Apache Kafka的支持与集成
1. 引言 Apache Kafka 是一个分布式的.容错的流处理系统.在本文中,我们将介绍Spring对Apache Kafka的支持,以及原生Kafka Java客户端Api 所提供的抽象级别. ...
- vue前端静态页面Github Pages线上预览实现
一.前期准备之项目编译 此处记录如何解决vue2.0 打包之后,打开index.html出现空白页的问题,附上@参考地址 打包之前修改三个文件 第一步,找到build文件,在webpack.prod. ...
- 使用@RequestBody注解获取Ajax提交的json数据
最近在学习有关springMVC的知识,今天学习如何使用@RequestBody注解来获取Ajax提交的json数据内容. Ajax部分代码如下: 1 $(function(){ 2 $(" ...
- VC与VB
VB调用VC dll的返回方式 第一种类型:数值传递注意:在VB中,默认变量传递方式为ByRef为地址,而传递值就是用ByVal,还要注意在C++中,int类型的变量是32位的,在VB中要用long型 ...