当前位置: 首页 > news >正文

2019-06-11 Java学习日记之Bootstrap

什么是响应式页面?

适应不同的分辨率显示不同的样式,提高用户的体验

BootStrap结构:

  全局CSS

    boosStrap中已经定义好了一套CSS的样式表

  组件

    bootStrap定义的一套按钮,导航条等组件

  JS插件

    bootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果

BootStrap的布局容器:

.container 类用于固定官渡并支持响应式布局的容器

.container-fluid  类用于 100% 宽度,占据全部视口(viewport)的容器。

校验表单扩展:

trigger  :  触发浏览器默认行为

triggerHandler  :  不会触发

is  :  判断

find  :  查找

BootStrap栅格系统的工作原理:

行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(aligment)和内部(padding)

通过行(row)在水平方向创建一组列(column)

你的内容应当放置于列(column)内,并且只有列(column)可以作为行(row)的直接子元素

类似.row和.col-xs-4这种预定义的类,可以用来快速创建栅格布局

BootStrap源码中定义的mixin也可以用来创建语义化的布局

通过为列(column)设置padding属性,从而创建列与列之间的间隔(gutter)。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为行(row)所包含的列(column)抵消掉了padding

BootStrap的栅格系统:

响应式设计:这种设计依赖于CSS3中的媒体查询

栅格样式:

设备分辨率大于1200使用lg样式

设备分辨率大于992 < 1200 使用md样式

设备分辨率大于768< 992使用sm样式

设备分辨率小于768使用xs样式

 

转载于:https://www.cnblogs.com/clqbolg/p/11006021.html

相关文章:

  • hdu 1561 树形dp+分组背包
  • 我使出这“三板斧”(分段锁、哈希锁、弱引用锁)灭霸跑了......
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • zimbra 证书过期--zimbra使用
  • 编程之美 象棋将帅问题
  • 你会写单元测试吗
  • 一道题浅谈【作业调度】与【进程调度】
  • imagick-3.1.0RC2 安装错误
  • Taro 1.3 震撼发布:全面支持 JSX 语法和 HOOKS
  • Android Adapter
  • ognl表达式
  • 直播APP关于后期运营你知道多少?
  • 【新手向】vim快捷注释与删除操作
  • Maven搭建SpringMVC+Mybatis项目详解
  • Access restriction: The method createJPEGEncoder(OutputStream) from the type JPEGCodec is not access
  • JavaScript-如何实现克隆(clone)函数
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • extract-text-webpack-plugin用法
  • iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码...
  • Java 网络编程(2):UDP 的使用
  • js继承的实现方法
  • js中的正则表达式入门
  • Markdown 语法简单说明
  • Object.assign方法不能实现深复制
  • Sublime text 3 3103 注册码
  • v-if和v-for连用出现的问题
  • Vue学习第二天
  • Webpack 4x 之路 ( 四 )
  • 编写符合Python风格的对象
  • 翻译--Thinking in React
  • 机器学习学习笔记一
  • 区块链分支循环
  • 删除表内多余的重复数据
  • 使用iElevator.js模拟segmentfault的文章标题导航
  • 小程序开发之路(一)
  • 写给高年级小学生看的《Bash 指南》
  • 再次简单明了总结flex布局,一看就懂...
  • 大数据全解:定义、价值及挑战
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • # 数据结构
  • #NOIP 2014#day.2 T1 无限网络发射器选址
  • (非本人原创)我们工作到底是为了什么?​——HP大中华区总裁孙振耀退休感言(r4笔记第60天)...
  • (附源码)springboot宠物医疗服务网站 毕业设计688413
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (规划)24届春招和25届暑假实习路线准备规划
  • (转)C#调用WebService 基础
  • (转)visual stdio 书签功能介绍
  • (转载)VS2010/MFC编程入门之三十四(菜单:VS2010菜单资源详解)
  • .NET core 自定义过滤器 Filter 实现webapi RestFul 统一接口数据返回格式
  • .NET 发展历程
  • .net开源工作流引擎ccflow表单数据返回值Pop分组模式和表格模式对比
  • .net流程开发平台的一些难点(1)
  • .NET项目中存在多个web.config文件时的加载顺序
  • @SuppressWarnings(unchecked)代码的作用