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. centos安装与配置keepalived+nginx高可用

    一.安装启动keepalived 1.下载keepalived 在centos系统中,用wget下载最新版本: mkdir tool cd tool wget https://www.keepaliv ...

  2. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  3. Android4.4 RIL短信接收流程分析

    最近有客户反馈Android接收不到短信,于是一头扎进RIL里面找原因.最后发现不是RIL的问题,而是BC72上报短信的格式不对,AT+CNMA=1无作用等几个小问题导致的.尽管问题不在RIL,但总算 ...

  4. JAVA杂记

    写在前面:期末考试要来了,对于一个暑假自学了几天JAVA之后一个学期划水的人来说现在就是踏上了JAVA预习之路.下面是自己xjb记的东西,主要是根据老师给的流程图总结的自己认为需要的一些零碎的小知识, ...

  5. CSS字体属性 font属性

    CSS的所有字体属性: ·-·  font 在一个声明中设置所有的字体属性 ·-·  font-family 指定文本的字体系列 ·-·  font-size 指定文本的字体大小  (属性值是整数字, ...

  6. vue3.0 本地调试时Invalid Host header

    问题场景: vue在开发时只能在本地浏览器里查看效果,我想在手机端真机调试,连接的代码还是本地环境,这样就不用频繁的发布了,于是绑定域名并指向本机的localhost:8080: 但是用域名访问时浏览 ...

  7. 精通awk系列(5):BEGIN和END语句块

    回到: Linux系列文章 Shell系列文章 Awk系列文章 BEGIN和END语句块 awk的所有代码(目前这么认为)都是写在语句块中的. 例如: awk '{print $0}' a.txt a ...

  8. Ubuntu 无法打开系统设置

    最近不知道咋搞得,导致系统设置打不开,可能是系统输入法的问题吧,运行以下命令: sudo apt-get install gnome-control-center

  9. jsf中的按钮加弹框的两种形式

    第一种: <p:commandButton value="一键移除" action="#{ProjectPackageManageBackingBean.remov ...

  10. sharepoint2010 部署到Windows server 2012 R2服务器遇到的问题

    最近由于客户服务器升级到windows server2012 R2 版本,生产环境需要相应升级. 查看很多资料,服务器升级到windows server2012 R2 版本,sharepoint要升级 ...