首页 > 编程语言 > 详细

Python-bootstrap

时间:2019-01-01 23:22:27      阅读:41      评论:0      收藏:0      [点我收藏+]

标签:还需   栅格系统   不失真   固定宽度   asc   type   int   src   h+   


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


4 栅格系统

1、概念

将父级可用宽度(content)均分为12等份

2、列比

- 超小屏幕:.col-xs-*
- 小屏幕:.col-sm-*
- 中等屏幕:.col-md-*
- 大屏幕:.col-lg-*
v-hint:只设置小屏列比会影响大屏列比;只设置大屏列比小屏时会撑满屏幕


3、行

<div class="row"></div>
...
<div class="row"></div>


4、列偏移

- 超小屏幕:.col-xs-offset-*
- 小屏幕:.col-sm-offset-*
- 中等屏幕:.col-md-offset-*
- 大屏幕:.col-lg-offset-*


5 常用组件

字体图标

优点:
size小
放大不失真
可以随字体颜色变化而变化
1. Bootstrap自带的
<span class=‘glyphicon glyphicon-heart‘></span>
2. font Awesome
<i class="fa fa-heart"></i>
https://www.fontawesome.com.cn/


下拉菜单
按钮组
输入框俎
导航
分页
标签和徽章
页头
缩率图
进度条

补充:滚动的进度条
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常用插件

1. 模态框
2. 轮播图


8. 其他插件

1. SweetAlert for bootstrap

https://lipis.github.io/bootstrap-sweetalert/

 

Python-bootstrap

标签:还需   栅格系统   不失真   固定宽度   asc   type   int   src   h+   

原文:https://www.cnblogs.com/du-jun/p/10206450.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号