首页 > 代码库 > bootstrap 的使用
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="http://www.mamicode.com/lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<!--
html5的语义标签在ie8以下不能被解析，导入这个js 文件，就是处理语义标签的兼容性
-->
<script src="http://www.mamicode.com/lib/html5shiv/html5shiv.min.js"></script>
<!--respond 响应的意思
处理的是ie8 以下的响应式media query
这个文件不支持本地打开。
-->
<script src="http://www.mamicode.com/lib/respond/respond.js"></script>
</head>
<body>
<!--
这个是jQuery 的文件，bootstrap 依赖jQuery
-->
<script src="http://www.mamicode.com/lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<!--
html5的语义标签在ie8以下不能被解析，导入这个js 文件，就是处理语义标签的兼容性
-->
<script src="http://www.mamicode.com/lib/html5shiv/html5shiv.min.js"></script>
<!--respond 响应的意思
处理的是ie8 以下的响应式media query
这个文件不支持本地打开。
-->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<!--
html5的语义标签在ie8以下不能被解析，导入这个js 文件，就是处理语义标签的兼容性
-->
<script src="http://www.mamicode.com/lib/html5shiv/html5shiv.min.js"></script>
<!--respond 响应的意思
处理的是ie8 以下的响应式media query
这个文件不支持本地打开。
-->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/images/slide_01_2000x410.jpg" alt="...">
<div class="carousel-caption">
北京大学
</div>
</div>
<div class="item">
<img src="http://www.mamicode.com/images/slide_02_2000x410.jpg" alt="...">
<div class="carousel-caption">
清华大学程序员
</div>
</div>
<div class="item">
<img src="http://www.mamicode.com/images/slide_03_2000x410.jpg" alt="...">
<div class="carousel-caption">
酷丁鱼
</div>
</div>
</div>
<a class="left carousel-control" href="http://www.mamicode.com/#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="http://www.mamicode.com/#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="http://www.mamicode.com/lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://www.mamicode.com/lib/html5shiv/html5shiv.min.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://www.mamicode.com/lib/html5shiv/html5shiv.min.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/boostrap/css/bootstrap.min.css" rel="stylesheet">
<script src="http://www.mamicode.com/lib/html5shiv/html5shiv.min.js"></script>
<script src="http://www.mamicode.com/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="http://www.mamicode.com/lib/jQuery/jquery.min.js"></script>
<!--bootstrap 的核心js 压缩文件 ，处理轮播图，js 效果的-->
<script src="http://www.mamicode.com/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 的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。