boostrap 学习笔记
bootstrap : 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。
用于项目样式的快速搭建,真的是。。特别快。。
随便找两个cdn引用就能使用了。
https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap-grid.css
https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.js
网格系统:
必须包含在.container类之中
基本结构
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
其中,col-m1-m2
m1值的是什么设备,一般有xs超小设备,sm小型平板电脑,md中型台式电脑,lg大型台式电脑
m2值的是列,这一列的长是多少,范围是lng1,lng12, 当其是12的时候,正好是扩展到整行。
col-md-offset-3 在m2前面加入offset,指示偏移,offset的范围是1到11
可以注意的是:行列,还可以嵌套使用。
常用类
bootstrap 已经为很多常用的html 标签,添加了基础的样式,其上更是有很多常用的类,直接写这些常用的类,可以大大地加快开发速度。
比如:
.table .btn .btn-default .img-rounded
组件式地开发。。
现在已经有各种bootstrap在线化的定制工具了。。
比如
Layoutit,Bootstrap Magic,Fancyboot,Bootsnipp
前端。。真的快跟写ppt一样了。。
boostrap 学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- C#界面设计相关设置
1.Anchor属性设置 对需要设置的控件,如主窗体中的TextBox,设置Anchor为上下左右都停靠,就会实现随着窗体的变化而变化. 2.AutoScaleMode属性的用法:<转自:htt ...
- 消费者驱动的契约Consumer drivern Contract
消费者驱动的契约Consumer Driven Contracts (CDC) A contract between a consuming service and a providing servi ...
- Mac 停止redis服务
停止redis服务: redis-cli shutdown 开始redis服务: redis-server
- mysql数据库排坑过程
刚安装mysql后想通过navicat来连接mysql,发现报错 1251这个错误,不慌.这个很简单. 首先通过cmd进入mysql. 然后修改密码规则 ALTER USER 'root'@'loca ...
- kibana的query string syntax 笔记
kibana的query string syntax 并不是 Query String Query,只能说类似.kibana的 Lucene query string syntax(es的query ...
- 持续集成(CI):Jmeter+Ant+Jenkins定时构建
这里Jenkins的安装部署以及工程项目的整体配置不做赘述,其它博文已经说明,这里主要是赘述Ant的相关配置,build.xml文件配置以及项目中的部分配置 一.build.xml 在Ant的安装目录 ...
- 深入浅出 PHP SPL(PHP 标准库)(转)
一.什么是spl库? SPL是用于解决典型问题(standard problems)的一组接口与类的集合. 此扩展只能在php 5.0以后使用,从PHP 5.3.0 不再被关闭,会一直有效.成为php ...
- 一文解读JSON (转)
JSON作为目前Web主流的数据交换格式,是每个IT技术人员都必须要了解的一种数据交换格式.尤其是在Ajax和REST技术的大行其道的当今,JSON无疑成为了数据交换格式的首选! 今天我们一起来学习一 ...
- 如何使ElementUi中的el-dropdown传入多参数
这边因为业务的需求,觉得随着产品中心以后需要按钮的增多(图1操作栏的效果),这样会导致排版和按钮过于冗长的问题,用户体验不佳,于是想到利用el-dropdown做一个下拉按钮(图1操作1栏的效果) . ...
- Oracle - crfclust.bdb文件太大
今天在检查oracle rac集群时,突然才发现服务器的根目录下面占用了很多空间,照道理不应该出现这种情况,初步猜想可能是哪个日志或跟踪文件太大导致.切换到跟目录,使用du -sh *来一层一层查看到 ...