bootstrap 的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
/*通过css 去获取屏幕的宽度*/
.container{
height: 500px;
background-color: green;
}
/*获取屏幕的宽度，指定区间的布局
1：大于1200px 我们叫做超大屏设备
2: 992---1200px 之间的，中等屏幕设备 1024
3: 768---992 之间 我们小屏幕设备 主要是paid
4：小于768px 的设备我们都叫做 移动设备。
*/
/*最大的宽度是768px ，这个区间的样式*/ /*
中等屏幕设备
所谓的响应式布局，通过获取屏幕宽度去设置指定区间的布局，同样的样式，我要写四份。
*/
@media screen and (max-width: 1200px){
.container{
height: 300px;
background-color: #c9302c;
}
}
/*针对的是小屏幕设备*/
@media screen and (max-width: 992px){
.container{
height: 100px;
background-color: yellowgreen;
}
}
/*针对的是移动设备*/
@media screen and (max-width: 768px){
.container{
height: 200px;
background-color: pink;
}
}
</style>
</head>
<body>
<!--
container 容器
-->
<div class="container"></div>
</body>
</html>
1、媒体查询；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
指定编码的，数据只要在网络上面传递，就会涉及到乱码问题。
请求的数据，我给服务器的，一般情况下get 方法，post 方式。
如果涉及到数据提交，你就使用post 方式提交的。
响应的数据
他后台的数据是什么样的编码
告诉客户端浏览器以什么样的编码去解析数据
Content-Type:text/html;charset=utf-8;
-->
<meta charset="utf-8">
<!--
如果客户端的浏览器版本是ie，就以最高的渲染引擎去解析页面。
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口，针对移动设备才会有效果-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap 的基本使用</title> <!--
这个是bootstrap 的核心的css 文件，这个里面有一些自带的样式
-->
<link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <!--
html5的语义标签在ie8以下不能被解析，导入这个js 文件，就是处理语义标签的兼容性
-->
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<!--respond 响应的意思
处理的是ie8 以下的响应式media query
这个文件不支持本地打开。
-->
<script src="../lib/respond/respond.js"></script>
</head>
<body> <!--
这个是jQuery 的文件，bootstrap 依赖jQuery
-->
<script src="../lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="../lib/boostrap/js/bootstrap.js"></script>
</body>
</html>
2、booststrap 的模板引用；
<!-- 引用字体图标
假设我想使用bootstrap 的字体
使用这个样式glyphicon 代表span 里面都使用bootstrap 的字体 glyphicon-menu-down 意味着boostrap 会给当前元素下面添加一个伪元素，伪元素的内容是\e259 <span class="glyphicon glyphicon-menu-down"></span> <!--
3、bootstrap的按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
指定编码的，数据只要在网络上面传递，就会涉及到乱码问题。
请求的数据，我给服务器的，一般情况下get 方法，post 方式。
如果涉及到数据提交，你就使用post 方式提交的。
响应的数据
他后台的数据是什么样的编码
告诉客户端浏览器以什么样的编码去解析数据
Content-Type:text/html;charset=utf-8;
-->
<meta charset="utf-8">
<!--
如果客户端的浏览器版本是ie，就以最高的渲染引擎去解析页面。
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口，针对移动设备才会有效果-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap 的表单</title> <!--
这个是bootstrap 的核心的css 文件，这个里面有一些自带的样式
-->
<link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <!--
html5的语义标签在ie8以下不能被解析，导入这个js 文件，就是处理语义标签的兼容性
-->
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<!--respond 响应的意思
处理的是ie8 以下的响应式media query
这个文件不支持本地打开。
-->
<script src="../lib/respond/respond.js"></script>
</head>
<body>
<!-- 按钮的使用 Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button> <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button> <!--
这个是jQuery 的文件，bootstrap 依赖jQuery
-->
<script src="../lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="../lib/boostrap/js/bootstrap.js"></script>
</body>
</html>
4、表单的使用；
<form >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
5、轮播图的使用；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
指定编码的，数据只要在网络上面传递，就会涉及到乱码问题。
请求的数据，我给服务器的，一般情况下get 方法，post 方式。
如果涉及到数据提交，你就使用post 方式提交的。
响应的数据
他后台的数据是什么样的编码
告诉客户端浏览器以什么样的编码去解析数据
Content-Type:text/html;charset=utf-8;
-->
<meta charset="utf-8">
<!--
如果客户端的浏览器版本是ie，就以最高的渲染引擎去解析页面。
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口，针对移动设备才会有效果-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap 的表单</title> <!--
这个是bootstrap 的核心的css 文件，这个里面有一些自带的样式
-->
<link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet"> <!--
html5的语义标签在ie8以下不能被解析，导入这个js 文件，就是处理语义标签的兼容性
-->
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<!--respond 响应的意思
处理的是ie8 以下的响应式media query
这个文件不支持本地打开。
-->
<script src="../lib/respond/respond.js"></script>
</head>
<body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol> <!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="data:images/slide_01_2000x410.jpg" alt="...">
<div class="carousel-caption">
北京大学
</div>
</div>
<div class="item">
<img src="data:images/slide_02_2000x410.jpg" alt="...">
<div class="carousel-caption">
清华大学程序员
</div>
</div>
<div class="item">
<img src="data:images/slide_03_2000x410.jpg" alt="...">
<div class="carousel-caption">
酷丁鱼
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div> <!--
这个是jQuery 的文件，bootstrap 依赖jQuery
-->
<script src="../lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="../lib/boostrap/js/bootstrap.js"></script>
</body>
</html>
6、栅格系统
<!--现在要学习栅格系统，在学习栅格系统之前，需要学习一个叫做container 容器
这个容器是bootstrap 自带的容器,以后的栅格系统里面的内容都放在这个container 容器 里面
这个是一个响应式容器，如果是响应式容器的话，他就可以去适应各种屏幕
我们之前使用的是最大 max-width ，现在是min-width
假设是超大屏幕，大于1200px ，这个时候container 的宽度1170
假设是中等屏幕 992-1200px 这个时候container 的宽度 970px
假设是小屏幕设备， 768-992px 这个时候container 的宽度 750px
假设是移动设备，小于768px ，这个container 的宽度是适配整个屏幕的宽度
这个contanier 版心容器 说有padding 的一个间隔。响应式容器 栅格系统：这个是用来做响应式布局的，我们之前在页面里面学习布局，一般情况下我们使用div 布局，
我们还有table 布局。表格布局，表格布局多行，多列。
栅格系统，其实也是多行多列。
-->
<div class="container">
<!--
定义一行
-->
<div class="row">
<!--这个行里面放置多少列
默认有一个样式，把container 的padding 清除掉了
margin-left:-15px;
-->
大发发的
</div>
</div> <!--这个是一个流式布局容器
width：100%；
-->
<div class="container-fluid"></div>
7、
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
指定编码的，数据只要在网络上面传递，就会涉及到乱码问题。
请求的数据，我给服务器的，一般情况下get 方法，post 方式。
如果涉及到数据提交，你就使用post 方式提交的。
响应的数据
他后台的数据是什么样的编码
告诉客户端浏览器以什么样的编码去解析数据
Content-Type:text/html;charset=utf-8;
-->
<meta charset="utf-8">
<!--
如果客户端的浏览器版本是ie，就以最高的渲染引擎去解析页面。
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口，针对移动设备才会有效果-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap 的基本使用</title>
<link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.js"></script>
<style>
.container{ height: 700px;
}
.container .row>div{
height: 40px;
background-color: green;
border: 1px solid #fff;
}
</style>
</head>
<body> <div class="container">
<div class="row">
<!--定义列
列，水平方向摆放
在栅格系统看来，每一行默认是放置12列，col-lg-3 每一列占1/4
我们的屏幕的分为四种类型的屏幕
超小屏幕 移动设备，小于768 col-xs-6
小屏幕 paid 768-992 col-sm-3
中等屏幕 992-1200 col-md-2 设置的是中等屏幕
超大屏幕 大于1200 col-lg-1 设置的是超大屏幕的对应的列的所占的比例
-->
<div class="col-lg-1 col-md-2 col-sm-3 col-xs-6"> </div>
<div class="col-lg-3 col-md-2 col-sm-3 col-xs-6"></div>
<div class="col-lg-3 col-md-2 col-sm-3 col-xs-6"></div>
<div class="col-lg-3 col-md-2 col-sm-3 col-xs-6"></div>
<div class="col-lg-2 col-md-2 col-sm-3 col-xs-6"></div>
</div>
</div> <!--这个是一个流式布局容器
width：100%；
-->
<div class="container-fluid"></div> <script src="../lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="../lib/boostrap/js/bootstrap.js"></script>
</body>
</html>
8、
<style>
.container{ height: 700px;
}
.container .row>div{
height: 40px;
background-color: green;
border: 1px solid #fff;
}
</style>
</head>
<body> <!--控制列的偏移，向左偏移多少，向右偏移多少。
pull 拉
push 推
-->
<div class="container">
<div class="row">
<!--
向右推6个间隔
-->
<div class="col-lg-3 col-lg-push-3">1111</div>
<!-- <!–向左拉三个格子–>
<div class="col-lg-6 col-lg-pull-3">adsfadsfadsfasdf</div>-->
</div>
</div>
<!--这个是一个流式布局容器
width：100%；
-->
<div class="container-fluid"></div>
9、栅格系统列偏移
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
指定编码的，数据只要在网络上面传递，就会涉及到乱码问题。
请求的数据，我给服务器的，一般情况下get 方法，post 方式。
如果涉及到数据提交，你就使用post 方式提交的。
响应的数据
他后台的数据是什么样的编码
告诉客户端浏览器以什么样的编码去解析数据
Content-Type:text/html;charset=utf-8;
-->
<meta charset="utf-8">
<!--
如果客户端的浏览器版本是ie，就以最高的渲染引擎去解析页面。
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口，针对移动设备才会有效果-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap 的基本使用</title>
<link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.js"></script>
<style>
.container{ height: 700px;
}
.container .row>div{
height: 40px;
background-color: green;
border: 1px solid #fff;
}
</style>
</head>
<body> <!--控制列的偏移，向左偏移多少，向右偏移多少。
pull 拉
push 推 -->
<div class="container">
<div class="row">
<!--
向右推6个间隔
-->
<div class="col-lg-3 pull-right">1111</div>
<div class="col-lg-3 pull-left">222</div>
</div>
</div> <script src="../lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="../lib/boostrap/js/bootstrap.js"></script>
</body>
</html>
10 栅格系统 列浮动
11 栅格系统响应式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!--
指定编码的，数据只要在网络上面传递，就会涉及到乱码问题。
请求的数据，我给服务器的，一般情况下get 方法，post 方式。
如果涉及到数据提交，你就使用post 方式提交的。
响应的数据
他后台的数据是什么样的编码
告诉客户端浏览器以什么样的编码去解析数据
Content-Type:text/html;charset=utf-8;
-->
<meta charset="utf-8">
<!--
如果客户端的浏览器版本是ie，就以最高的渲染引擎去解析页面。
-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口，针对移动设备才会有效果-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>bootstrap 的基本使用</title>
<link href="../lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<script src="../lib/html5shiv/html5shiv.min.js"></script>
<script src="../lib/respond/respond.js"></script>
<style>
.container{
height: 700px;
}
.container .row>div{
height: 40px;
background-color: green;
border: 1px solid #fff;
}
</style>
</head>
<body> <div class="container">
<div class="row hidden-sm hidden-xs">
<!--如果是小屏幕或者是移动设备，我就把这个row 隐藏掉
hidden-sm 针对小屏幕隐藏，针对超小屏幕也隐藏
-->
<div class="col-lg-3">1111</div>
<div class="col-lg-3">大发发的</div>
<div class="col-lg-3">1111</div>
<div class="col-lg-3">大发发的</div>
</div>
</div> <script src="../lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="../lib/boostrap/js/bootstrap.js"></script>
</body>
</html>
<form >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
bootstrap 的使用的更多相关文章
- 旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 旺财速啃H5框架之Bootstrap（一）
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- [BootStrap] 富编辑器，基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...
随机推荐
- [转]SSIS ADO.NET vs OLEDB
本文转自:http://social.msdn.microsoft.com/Forums/sqlserver/en-US/1a9e3670-9685-4943-913b-123ecf248a9c/ol ...
- Android之通知使用权
通知使用权打开方式 设置--提示音和通知--通知使用权. 具体界面如图: 存在须要拥有通知使用权应用时: 不存在须要拥有通知使用权应用时: 用户为应用勾选复选框后系统弹dialog须要用户进一步确认时 ...
- 使用FreeMarker的Web Project例子
1 创建一个名为FreemarkerDemo的Web Project 2 删除index.jsp,新建index.html,index.html中的内容为: <html> <head ...
- 【Linux】Shell三类变量的作用域——linux shell “永久环境变量”、“临时环境变量”和"普通变量"之完全解读
2015-05-08 00:15 3896人阅读 评论(10) 收藏 举报 本文章已收录于: 分类: 软件开发进阶(419) 作者同类文章X Unix/Linux杂项(118) 作者同类文章X ...
- HTML5基础知识汇总_(2)自己定义属性及表单新特性
自己定义属性data-* 说起这个属性,事实上如今非经常见了;怎么说呢,由于在一些框架都能看到他的身影!!! 比方Jquery mobile,里面非常频繁的使用了这个属性; 这个属性是哪里来的-.当然 ...
- TestNG 五 运行TestNG
一.并行运行于超时 可以通过在suite标签中使用 parallel 属性来让测试方法运行在不同的线程中.这个属性可以带有如下这样的值: <suite name="My suite&q ...
- Solidworks如何设置零件材料，如何评估零件质量
右击材质,然后编辑材料,在弹出菜单中在Solidworks materials中选择零件材料(一般钢或者铁,注意质量密度是否跟你需要的一致),完成之后点击应用和关闭 在评估-质量属性中可以看到当前 ...
- EAS常用工具类
package com.kingdee.eas.custom; import java.io.File; import java.io.FileNotFoundException; import ja ...
- onethink 密码加密方式详解
/** * 系统非常规MD5加密方法 * @param string $str 要加密的字符串 * @return string */ function think_ucenter_md5($str, ...
- TCP 的那些事儿（上） SACK
http://blog.csdn.net/woxiaozhi/article/details/27328557 文章太好了,转载过啦 这篇文章分为上下两篇 确实不错 所以存在这里收藏 TCP是一个 ...