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 学习笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

随机推荐

  1. 简单介绍托管执行和 CLI

    目录 CIL 和 ILDASM 查看 myApp.dll 的 CIL 输出 使用 ILSpy 查看 myApp.dll 反编译后的代码 处理器不能直接解释程序集.程序集用的是另一种语言,即公共中间语言 ...

  2. ObjectPool 对象池设计模式

    Micosoft.Extension.ObjectPool 源码架构.模式分析: 三大基本对象: ObjectPool抽象类 ObjectPoolProvider抽象类 IPooledObjectPo ...

  3. 分布式事物 - 基于RPC调用 - TCC模式

    前提 前端业务(主服务)可以以同步或异步调用TCC框架,或者TCC框架本身就是同步异步兼备的. 假定TCC框架拥有断电后的自动恢复能力.同时,在下游业务出现无限失败的情况下,也会进行无限的重试,以达到 ...

  4. React每隔0.2s颜色变淡 之生命周期 ,componentDidMount表示组件已经挂载

    05案例 每隔0.2s颜色变淡 componentDidMount表示组件已经挂载,可以进行DOM操作 import React, { Component } from "react&quo ...

  5. 【HNOI 2019】JOJO

    Problem Description JOJO 的奇幻冒险是一部非常火的漫画.漫画中的男主角经常喜欢连续喊很多的「欧拉」或者「木大」. 为了防止字太多挡住漫画内容,现在打算在新的漫画中用 \(x\) ...

  6. 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 ...

  7. laravel大量填充项目测试数据的正确方法

    项目开发时,一般都会有到项目测试数据的准备操作,以前都是基于PHP代码自主编写sql语句,然后循环的插入到数据库中里面,当当我们接触过laravel数据库后,就可以很方便的完成项目的测试数据准备. 但 ...

  8. Refresh design pattern

    多年后, 再次翻阅设计模式书籍, 将每种模式的要点总结于此, 需要本身有一定设计模式基础, 再结合要点, 帮助更好理解与运用. 策略模式 (Strategy) 附加功能单独抽象不同接口 功能以组合方式 ...

  9. Vue和React的区别,以及如何选择?

    简介 React:React是一个用于创建可重用且有吸引力的UI组件的库.它非常适合代表经常变化的数据的组件. Vue:Vue.js是一个开源JavaScript框架,能够开发单页面应用程序.它还可以 ...

  10. 从零开始学vuejs

    最近一段时间都花在了学习vue上,还总是断断续续的,学习的效果不是很明显,思考了好久了,应该是没有进行一个系统的总结,导致很多知识点总是似是而非,而且也有一部分是思维还没有从java转变过来,废话不多 ...