我的学习之路_第二十九章_bootstrap

bootstrap

内置了html,css,js插件为一体的前端框架

响应式布局:
设计一套页面就可以使用于很多现实设备

bootstrap:
1.入门(响应式布局的容器)

1.先进入jQuery的js
2.再引入bootstrap的js
3.引入bootstrap的css文件
4.设置视口(支持移动设备优先)

<meta name="viewport" content="width=device-width,initial-scale=1">

5.页面创建一个布局容器

<div class="container"> </div> (不流动)
<div class="container-fluid" > </div> (流动)

了解:css的媒体查询
默认情况 有个设置的阈值价格屏幕分辨率分为几个区间
分辨率: 屏幕大小
分辨率>1200px 大屏幕
1200px>分辨率>992px 中等的屏幕
992px>分辨率>768px 小屏幕
768px>分辨率 超小屏幕

栅格系统: 根据屏幕分辨率的大小而页面做出不同的显示效果

一行会被平均分成12份,如果多与12份另起一行

分辨率: 屏幕大小 样式 例如
分辨率>1200px 大屏幕 col-lg-n col-lg-1
1200px>分辨率>992px 中等的屏幕 col-md-n col-md-2
992px>分辨率>768px 小屏幕 col-sm-n col-sm-4
768px>分辨率 超小屏幕 col-xs-n col-xs-6

还提供隐藏元素div样式
hidden-xs (超小屏隐藏)
hidden-sm (小屏隐藏)
hidden-md (中等屏隐藏)
hidden-lg (大屏下隐藏)
bootstrap组成:
全局的css样式:设置全局css样式;基本的HTML元素均可以通过class设置并增强效果,还有先进的栅格系统.
组件:
js插件

class="btn btn-primary 超链接按钮框

img-circle 图片样式

pull-left 靠左

pull-right 靠右

<nav class="navbar navbar-inverse" role="navigation"> 导航条背景换色

时间： 2024-10-13 11:57:54

我的学习之路_第二十九章_bootstrap的相关文章

我的学习之路_第二十二章_事务

JDBC事务 [事务] 作用: 保证多条SQL语句,要么都执行成功,要么都执行失败. mysql数据库,执行SQL语句,自动开启事务,提交事务,回滚事务,把数据永久保存 oracle数据库,执行SQL语句,手动开始会务,提交事务,回滚事务,把数据永久保存. Connection接口中和事务有关的方法: 无返回值 setAutoCommit(boolean autoCommit) 将此连接的自动提交模式设置为给定状态. 参数:autoCommit : true表示自动提交模式, false表示禁用

我的学习之路_第二十六章_javaScript（2）

Javascript [DOM操作] 获取元素 var obj = document.getElementById("id值"); 获取值 obj.value; 设置值 obj.value=值; 获取标签体内容 obj.innerHtml; 设置标签体内容 obj.innerHtml=值; 使用正则表达式校验数据 1.编写正则表达式 1.用户名的正则 : /^[a-z0-9_-]{3,16}$/ 2.密码:/^[a-z0-9_-]{6,18}$/ 3.电子邮箱:/^([a-z0-9_\

我的学习之路_第二十八章_JQuery 和validator插件

jQuery 利用jQuery进行遍历 js原生: for(var i=0;i>?;i++){ } jQuery: 方式一: 想要遍历的jQuery对象.each(function(index,dom){ }); 方式二: $.each(想要遍历的jQuery对象,function(index,dom){ }); 操作元素的值或者标签体 xxx():获取操作 xxx("值"):设置 获取或设置值: val(); 获取或设置标签体: html() 获取或设置标签体: text()

我的学习之路_第十四章_反射

类的反射 [获取class文件对象的三种方式]: ● 使用Object类中的方法 getClass() Class<?> getClass() 返回此Object的运行时类. ● 使用类名.class属性 每一个数据类型,基本数据类型和引用数据类型,Java都会为其设置一个class属性 例如: Class class = int.class Class class = String.class Class class = Person.class● 使用Class类中的静态方法forName

我的学习之路_第十六章_xml

[XML] 可扩展的标记语言 作用:存放数据.配置文件 [XML的语法] xml的文件扩展名必须为: xml xml的内容必须满足以下要求: 1.固定的文档声明 2.合格的元素和属性 3.正确的注释 4.符合要求的特殊字符编写规则 ●文档声明 ( <?xml version="1.0" encoding = "UTF-8" ?> ) 1.文档声明必须以<?xml 开头, 以?>结束 2.文档声明必须从文档的0行0列位置开始 3.文档声明的两个

【WPF学习】第二十九章 元素绑定——将元素绑定到一起

原文:[WPF学习]第二十九章 元素绑定--将元素绑定到一起 数据banding的最简单情形是,源对象时WPF元素而且源属性是依赖性属性.前面章节解释过,依赖项属性具有内置的更改通知支持.因此,当在源对象中改变依赖项属性的值时,会立即更新目标对象中的绑定属性.这正是我们所需要的行为--而且不必为此构建任何额外的基础结构. 为理解如何将一个元素绑定到另一个元素,下面创建一个简单的示例.该示例窗口包含了两个控件:一个Slider控件和一个具有单行文本的TextBlock控件.如果向右拖动滑动条上的滑

Gradle 1.12用户指南翻译——第二十九章. Checkstyle 插件

其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Github上的地址: https://github.com/msdx/gradledoc/tree/1.12. 直接浏览双语版的文档请访问: http://gradledoc.qiniudn.com/1.12/userguide/userguide.html. 另外,Android 手机用户可通过我写的一个程序浏览文档,带缓存功能的,目前

第二十九章 springboot + zipkin + mysql

zipkin的数据存储可以存在4个地方: 内存(仅用于测试,数据不会持久化,zipkin-server关掉,数据就没有了) 这也是之前使用的 mysql 可能是最熟悉的方式 es Cassandra 一.代码(基于 第二十八章 springboot + zipkin(brave定制-AsyncHttpClient)) 1.pom.xml 1 <dependency> 2 <groupId>io.zipkin.brave</groupId> 3 <artifactI

我的学习之路_第十八章_SQL语句

SQL语句 启动数据库: net start mysql 关闭数据库: net stop mysql 登录数据库 : cmd-->命令行-->mysql-->mysql -u账号 -p密码 [创建和删除数据库] 使用关键字 : create(创建) database(数据库) 格式: create database 数据库名; create database 数据库名 character set 字符集; ●--查看mysql中所有的数据库 show database; ●--查看某个数