bootstrap 学习笔记(1)---介绍bootstrap和栅格系统
学习前端许久,对于布置框架和响应浏览器用html 和javascript 写的有点繁琐,无意间看到这个框架,觉得挺好用的就开始学习了,但是这个框架上面有很多知识,不是所有的都要学的,故将学习笔记和觉得重点的东西写下来,以便以后学习。
Bootstrap 是一个相应式的布局的一个前端框架。
bootstrap 学习有以下步骤:
1、bootstrap 安装,
2、bootstrap 全局css 样式
3、bootstrap css组件
4、bootstrap javascript 插件
bootstrap 安装:官网下载压缩包解压到项目中,然后在项目文件中引入下面三行代码:
<link rel="stylesheet" href="bs/css/bootstrap.css" />
<script src="bs/js/jquery-3.1.1.js"></script>
<script src="bs/js/bootstrap.js"></script>
全局css 样式:
a.必须是html5文档类型<!DOCTYPE html>
b.移动设备优先 通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。
这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,
还是要看你自己的情况而定!(这被称为视宽)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
布局容器:
Bootstrap 需要为页面内容和栅格系统包裹一个 .container
容器。我们提供了两个作此用处的类。注意,由于 padding
等属性的原因,这两种 容器类不能互相嵌套。
<div class="container">
栅格系统:
...
</div>
1、Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,
系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
比较有用的例子:class="col-md-" 意思是将列分成12格子,col-md-num 中num的值是每个元素占据多少格子,12/num算出有多少个元素。
row 1行12列
<div class="row">
<div class="col-md-3">
<img src="data:images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="data:images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="data:images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="data:images/1.png" width="100%" />
</div>
</div>
用下面的方法产生临时图片:
<div class="row">
<div class="col-md-3">
<img src="holder.js/100x300" />
</div>
</div>
2、前面的几个不要,使图片前面空几个格子用:col-md-offset-num
eg:
<div class="row">
<div class="col-md-3">
<img src="data:images/1.png" width="100%" />
</div>
<div class="col-md-3">
<img src="data:images/1.png" width="100%" />
</div>
<div class="col-md-3 col-md-offset-3">
<img src="data:images/1.png" width="100%" />
</div>
</div>
3、有个列排序没必要看,用这个也可以实现:pull-right pull-left
eg:
<div class="row">
<div class="col-md-3 pull-left">
<img src="data:images/1.png" width="100%" />
</div>
<div class="col-md-3 pull-left">
<img src="data:images/1.png" width="100%" />
</div>
</div>
bootstrap 学习笔记(1)---介绍bootstrap和栅格系统的更多相关文章
- bootstrap学习笔记<八>(bootstrap核心布局风格——栅格系统)
栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...
- bootstrap学习笔记<一>(bootstrap用法)
首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- ASP.NET Core Web开发学习笔记-1介绍篇
ASP.NET Core Web开发学习笔记-1介绍篇 给大家说声报歉,从2012年个人情感破裂的那一天,本人的51CTO,CnBlogs,Csdn,QQ,Weboo就再也没有更新过.踏实的生活(曾辞 ...
- Bootstrap学习笔记-栅格系统
栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...
随机推荐
- WPA2密钥重装攻击原理分析
这两天最火爆的莫过 “WPA2被破解” 这一条大新闻了.我对其原理非常感兴趣,苦于没有找到的文献,所以就整理这么一篇,方便自己和大家理解.主要是根据目前发布的文章以及一些相关资料. 壹.WPA2的机制 ...
- 转:mybatis——select、insert、update、delete
一.select <!-- 查询学生,根据id --> <select id="getStudent" parameterType="String&qu ...
- Neutron网络入门
Neutron是OpenStack核心项目之中的一个,提供云计算环境下的虚拟网络功能.Neutron的功能日益强大,并在Horizon面板中已经集成该模块.作为Neutron的核心开发人员之中的一个. ...
- react-redux 和 redux-saga 小结
react-redux 将 store 绑定到 props 上,便于全局调用. redux-saga 是将 redux 的同步转换为异步. 注: dispatch 到 saga , saga 匹配行为 ...
- mysql用户修改登录密码及授予用户远程登录权限
一.修改用户登录密码: mysql> show databases;ERROR 1820 (HY000): You must SET PASSWORD before executing this ...
- jsp表达式
能够在"<%="和"%>"之间插入一个表达式(注意:不可插入语句. "<%="是一个完整的符号,"<%&q ...
- 微信热补丁 Tinker 的实践演进之路
http://dev.qq.com/topic/57ad7a70eaed47bb2699e68e http://dev.qq.com/topic/57a30878ac3a1fb613dd40eb ht ...
- springboot实战--笔记
由于这本书看过一遍,所以这里是二次复习,记录的东西比较少,就不分章节了. 共12章,524页,预计时间是18h 第一章 spring基础: 第二章 spring常用配置: bean的Scope:sin ...
- 开源流媒体客户端EasyClient手机端控制摄像机EasyCamera云台PTZ控制实现
本文转自EasyDarwin开源团队成员kim的博客:http://blog.csdn.net/jinlong0603/article/details/51835308 EasyCamera是Easy ...
- Eclipse中连接Sql Sever2008 -----转自Yogurshine
Eclipse中连接Sql Sever2008 -----转自Yogurshine 一 SQl Sever服务器配置 1我之前已经安装好SQL Sever 2008R2.(注意:安装一遍未成功时,一定 ...