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 ...
随机推荐
- 简单介绍托管执行和 CLI
目录 CIL 和 ILDASM 查看 myApp.dll 的 CIL 输出 使用 ILSpy 查看 myApp.dll 反编译后的代码 处理器不能直接解释程序集.程序集用的是另一种语言,即公共中间语言 ...
- ObjectPool 对象池设计模式
Micosoft.Extension.ObjectPool 源码架构.模式分析: 三大基本对象: ObjectPool抽象类 ObjectPoolProvider抽象类 IPooledObjectPo ...
- 分布式事物 - 基于RPC调用 - TCC模式
前提 前端业务(主服务)可以以同步或异步调用TCC框架,或者TCC框架本身就是同步异步兼备的. 假定TCC框架拥有断电后的自动恢复能力.同时,在下游业务出现无限失败的情况下,也会进行无限的重试,以达到 ...
- React每隔0.2s颜色变淡 之生命周期 ,componentDidMount表示组件已经挂载
05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...
- 【HNOI 2019】JOJO
Problem Description JOJO 的奇幻冒险是一部非常火的漫画.漫画中的男主角经常喜欢连续喊很多的「欧拉」或者「木大」. 为了防止字太多挡住漫画内容,现在打算在新的漫画中用 \(x\) ...
- How to: Change the Format Used for the FullAddress and FullName Properties 如何:更改用于FullAddress和FullName属性的格式
There are FullAddress and FullName properties in the Address and Person business classes that are su ...
- laravel大量填充项目测试数据的正确方法
项目开发时,一般都会有到项目测试数据的准备操作,以前都是基于PHP代码自主编写sql语句,然后循环的插入到数据库中里面,当当我们接触过laravel数据库后,就可以很方便的完成项目的测试数据准备. 但 ...
- Refresh design pattern
多年后, 再次翻阅设计模式书籍, 将每种模式的要点总结于此, 需要本身有一定设计模式基础, 再结合要点, 帮助更好理解与运用. 策略模式 (Strategy) 附加功能单独抽象不同接口 功能以组合方式 ...
- Vue和React的区别,以及如何选择?
简介 React:React是一个用于创建可重用且有吸引力的UI组件的库.它非常适合代表经常变化的数据的组件. Vue:Vue.js是一个开源JavaScript框架,能够开发单页面应用程序.它还可以 ...
- 从零开始学vuejs
最近一段时间都花在了学习vue上,还总是断断续续的,学习的效果不是很明显,思考了好久了,应该是没有进行一个系统的总结,导致很多知识点总是似是而非,而且也有一部分是思维还没有从java转变过来,废话不多 ...