Python-bootstrap
1 引⼊
如果想要⽤到BootStrap提供的js插件，那么还需要引⼊jQuery框架，因为BootStrap提供的js插件是依赖于jQuery的
<link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
2 容器
- 固定宽度：.container
- 流式布局：.container-fluid
3 响应式布局
- 超⼩屏幕：⼩于 768px
- ⼩屏幕：⼤于等于 768px
- 中等屏幕：⼤于等于 992px
- ⼤屏幕：⼤于等于 1200px
随着移动设备的流⾏，⽹页设计必须要考虑到移动端的设计。同⼀个⽹站为了兼容PC端和移动端显⽰，就需要进⾏响应式开发。jquery框架定义
利⽤媒体查询，让同⼀个⽹站兼容不同的终端（PC端、移动端）呈现不同的页⾯布局。
CSS3@media查询
⽤于查询设备是否符合某⼀特定条件，这些特定条件包括屏幕尺⼨、是否可触摸、屏幕精度、横屏竖屏等信息。
常见属性：
device-width, device-height 屏幕宽、⾼
width,height 渲染窗⼝宽、⾼
orientation 设备⽅向
resolution 设备分辨率
语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
不同的媒体使⽤不同的stylesheet
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
viewport
⼿机浏览器是把页⾯放在⼀个虚拟的"窗⼝"（viewport）中，通常这个虚拟的"窗⼝"（viewport）⽐屏幕宽，这样就不⽤把每个⽹页挤到很⼩的窗⼝中（这样会破坏没有针对⼿机浏览器优化的⽹页的布局），⽤户可以通过平移和缩放来看⽹页的不同部分。
设置viewport
⼀个常⽤的针对移动⽹页优化过的页⾯的 viewport meta 标签⼤致如下：
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
width：控制 viewport 的⼤⼩，可以指定的⼀个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定⾼度。
initial-scale：初始缩放⽐例，也即是当页⾯第⼀次 load 的时候缩放⽐例。
maximum-scale：允许⽤户缩放到的最⼤⽐例。
minimum-scale：允许⽤户缩放到的最⼩⽐例。
user-scalable：⽤户是否可以⼿动缩放。
Bootstrap的栅格系统
container
row
column
注意事项：使⽤Bootstrap的时候不要让⾃⼰的名字与Bootstrap的类名冲突。
4 栅格系统
将⽗级可⽤宽度(content)均分为12等份
0. 包含在container⾥⾯
1. 每⼀⾏（row）均分成12列(col-xx-**）必须放在row中)，
2. 每⼀个标签可以⾃定义占的列数（col-xx-**）
列偏移
列排序
- 超⼩屏幕：.col-xs-*
- ⼩屏幕：.col-sm-*
- 中等屏幕：.col-md-*
- ⼤屏幕：.col-lg-*
v-hint：只设置⼩屏列⽐会影响⼤屏列⽐；只设置⼤屏列⽐⼩屏时会撑满屏幕
<div class="row"></div>
...
<div class="row"></div>
- 超⼩屏幕：.col-xs-offset-*
- ⼩屏幕：.col-sm-offset-*
- 中等屏幕：.col-md-offset-*
- ⼤屏幕：.col-lg-offset-*
5 常⽤组件
补充：滚动的进度条
var $d1 = $("#d1");
var width = 0;
var theID = setInterval(setValue, 200);
function setValue() {
if (width === 100) {
clearInterval(theID);
} else {
width++;
$d1.css("width", width+"%").text(width+"%");
}
}
6. Bootstrap常⽤组件
7. Bootstrap常⽤插件
模态框的HTML代码放置的位置
务必将模态框的HTML代码放在⽂档的最⾼层级内（也就是说，尽量作为 body 标签的直接⼦元素），以避免其他组件影响模态框的展现和/或功能。<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
注意：
通过为模态框设置.bs-example-modal-lg和.bs-example-modal-sm来控制模态框的⼤⼩。
通过.fade类来控制模态框弹出时的动画效果（淡⼊淡出效果）。
通过在.modal-body div中设置.row可以使⽤Bootstrap的栅格系统。
<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="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<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>
可以在为图⽚添加介绍信息：
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
⽅法：
设置切换间隔为2秒，默认是5秒。
$('.carousel').carousel({
interval: 2000
})
8. 其他插件
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论