栅格系统pull和push的应用
时间:2020-05-29
本文章向大家介绍栅格系统pull和push的应用,主要包括栅格系统pull和push的应用使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> 7 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 8 <style type="text/css"> 9 a{ 10 display: block; 11 text-align: center; 12 color: gray; 13 } 14 </style> 15 16 <!-- 需求; 17 1.将Bootstrap的缩略图在md屏幕中,第一个往下一行 18 2.他们往下一行的顺序Bootstrap,yaum,react,webpack 19 --> 20 21 <!-- 再结构上,最后一个是会下去,若要在第一个下去,则需要设置偏移量lefe right 22 col-lg-push-9,在大屏状态下,right偏移9个 23 --> 24 </head> 25 <body> 26 <div class="container"> 27 <div class="jumbotron"> 28 <h1>Hello, world!</h1> 29 </div> 30 <div class="row"> 31 <div class="col-lg-3 col-lg-push-9 col-md-4 col-md-push-8 col-sm-6 col-sm-push-6"> 32 <div class="thumbnail"> 33 <img src="img/webpack.png" alt="..."> 34 <div class="caption"> 35 <h3 class="text-center">Bootstrap 编码规范</h3> 36 <a href="javascript:;" class="text-center">by @mdo</a> 37 <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p> 38 </div> 39 </div> 40 </div> 41 42 <div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0 col-sm-6 col-sm-pull-6"> 43 <div class="thumbnail"> 44 <img src="img/react.png" alt="..."> 45 <div class="caption"> 46 <h3>Bootstrap 编码规范</h3> 47 <a href="javascript:;" class="text-center">by @mdo</a> 48 <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p> 49 </div> 50 </div> 51 </div> 52 53 <div class="col-lg-3 col-lg-pull-3 col-md-4 col-md-pull-8 col-sm-6"> 54 <div class="thumbnail"> 55 <img src="img/yarn.png" alt="..."> 56 <div class="caption"> 57 <h3>Bootstrap 编码规范</h3> 58 <a href="javascript:;" class="text-center">by @mdo</a> 59 <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p> 60 </div> 61 </div> 62 </div> 63 64 <div class="col-lg-3 col-lg-pull-9 col-md-4 col-sm-6"> 65 <div class="thumbnail"> 66 <img src="img/bootstrap.png" alt="..."> 67 <div class="caption"> 68 <h3>Bootstrap 编码规范</h3> 69 <a href="javascript:;" class="text-center">by @mdo</a> 70 <p>Bootstrap 编码规范:编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。</p> 71 </div> 72 </div> 73 </div> 74 </div> 75 </div> 76 </body> 77 <script src="js/jquery.min.js"></script> 78 <script src="js/bootstrap.min.js"></script> 79 </html>
原文地址:https://www.cnblogs.com/fsg6/p/12987523.html
- AngularJS源码分析之依赖注入$injector
- 使用yield进行异步流程控制
- 【Java提高十七】Set接口集合详解
- 如何科学地蹭热点:用python爬虫获取热门微博评论并进行情感分析
- 使用ETag进行session的降级
- 关于oracle中的反连接(r3笔记第95天)
- 用Python爬取网易云音乐的用户评论文本
- grunt任务之seajs模块打包
- 【Java提高十八】Map接口集合详解
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(五)讲一下maven
- Thinking in React
- 【Java提高十六】集合List接口详解
- JS的内建函数reduce
- Error: Cannot find module 'gulp-clone'问题的解决
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 视频上云/网络穿透/网络映射服务EasyNTS前端切换页面卡顿如何优化?
- [译] 在 Vue 组件中分离 UI 和业务逻辑
- Android Notes|BottomNavigationView 爱上 Lottie
- Android Notes|玩转 ShapeableImageView
- 前端技术 Webpack(学习 Webpack 的原因,Webpack 快速入门)
- 每日一问第1期 | 截取字符串
- 动态规划此一篇就够了 万字总结
- 每日一问第2期 | final, finally, finalize 的区别?
- 当return遇到try、catch、finally时会发生什么?
- 五分钟C语言数据结构 之 二叉树层次遍历
- 为何IntelliJ IDEA比Eclipse好在哪里?
- 五分钟C语言数据结构 之 二叉树中序遍历
- Django 安全之跨站点请求伪造(CSRF)保护
- 五分钟C语言数据结构 之 二叉树先序遍历
- Java 语言基础(常用设计原则和设计模式,常用 Java 8~11 新特性)