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的出现,或皮肤跟网站不匹配, ...
随机推荐
- OpenShift helm的安装
1.安装过程 下载addons的代码 $ git clone https://github.com/jorgemoralespou/minishift-addons $ cd minishift-ad ...
- python学习:两个py文件间的函数调用
本例子是测试一些数据分析模型的R值,R值越接近1,表明该模型越适合分析该数据集. 本例子是在集成开发环境Aptana Studio 3 中创建 一个dataAnaly ,然后创建modelTest.p ...
- 《jQuery基础》总结
目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的<jQuery基础>(jQuery Fundamentals).这本书虽然是入门教材,但也足足有100多页.我 ...
- 【leetcode】Binary Tree Postorder Traversal
题目: Given a binary tree, return the postorder traversal of its nodes' values. For example: Given bin ...
- shorthand trick with boolean expressions
https://stackoverflow.com/questions/2802055/what-does-the-construct-x-x-y-mean --------------------- ...
- 超酷的实时颜色数据跟踪javascript类库 - Tracking.js
来源:GBin1.com 今天介绍这款超棒的Javascript类库是 - Tracking.js,它能够独立不依赖第三方类库帮助开发人员动态跟踪摄像头输出相关数据. 这些数据包括了颜色或者是人, 这 ...
- ffmpeg与TS
http://blog.csdn.net/shuyong1999/article/details/7176329 一个不错的音视频博客 0. 简介 FFmpeg是一个集录制.转换.音/视频编码解码功能 ...
- java中的super限定
super的用法: (1)如果需要在子类中调用父类中被覆盖的实例方法,可以用super限定来调用父类中被覆盖的方法.当然,也可以调用从父类继承的实例变量. public void callOverri ...
- 算法笔记_167:算法提高 矩阵翻转(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 Ciel有一个N*N的矩阵,每个格子里都有一个整数. N是一个奇数,设X = (N+1)/2.Ciel每次都可以做这样的一次操作:他从矩阵 ...
- VB.NET与 sql数据库
数据蕴含丰富的信息,数据就是资源. 不同的语言,因为各自的语法特点.对sql数据库的连接操作有些小差别.但有一点,那就是.对sql数据库的操作语句sql语句大体是一样的. 这段时间正进行VB.NET的 ...