Bootstrap/Html5/Css3 问答社区

bootsrap 扩展集合

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2040 次浏览 • 2016-02-17 11:09 • 来自相关话题

欢迎大家提交
我也会不断跟进?
提交格式如下：
?
扩展插件名称：
扩展插件用途：
扩展插件地址：
扩展插件截图：（如果有而且方便）
..................................................................................................... 查看全部

如何在网页上某一个div内滚动滚动条时，禁止整个document的滚动？

贡献

CSS/SASS/SCSS/LESS • lopo1983 回复了问题 • 2 人关注 • 2 个回复 • 2500 次浏览 • 2016-02-16 16:02 • 来自相关话题

你们放假了吗？放假了怎么玩哈哈！

扯蛋 • 匿名用户回复了问题 • 1 人关注 • 1 个回复 • 1840 次浏览 • 2016-02-02 17:07 • 来自相关话题

typeahead使用ajax补全输入框

bootstrap2.x • lopo1983 发表了文章 • 0 个评论 • 2135 次浏览 • 2016-02-01 09:53 • 来自相关话题

$('.typeahead').typeahead({
source:function(query, process)
{
$.ajax({
url: site_url + 'product/get_pdt_name',
type: 'GET',
dataType: 'JSON',
async: true,
data: 'pdt_name=' + query ,
success: function(data)
{
var arr = [];
for (i in data)
{
arr.push(data[i]['pdt_name']);
}
process(arr);
}
});
}
}) 查看全部

$('.typeahead').typeahead({

source:function(query, process)

{

$.ajax({

url: site_url + 'product/get_pdt_name',

type: 'GET',

dataType: 'JSON',

async: true,

data: 'pdt_name=' + query ,

success: function(data)

{

var arr = [];

for (i in data)

{

arr.push(data[i]['pdt_name']);

}

process(arr);

}

});

}

})

晚上下班你们怎么玩?

贡献

扯蛋 • Isvivi 回复了问题 • 4 人关注 • 3 个回复 • 2037 次浏览 • 2016-01-29 17:08 • 来自相关话题

bootstrap 图片上传插件

贡献

bootstrap3.x • 戏子回复了问题 • 2 人关注 • 1 个回复 • 2371 次浏览 • 2016-01-22 11:38 • 来自相关话题

css3 hover 放大圈效果

CSS/SASS/SCSS/LESS • lopo1983 发表了文章 • 1 个评论 • 2163 次浏览 • 2016-01-21 10:27 • 来自相关话题

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<style>
html,
body {
height: 100%;
background-color: rgb(56, 81, 188);
}

.icon {
display: inline-block;
font-size: 0px;
cursor: pointer;
margin: 60px 120px;
width: 90px;
height: 90px;
border-radius: 50%;
text-align: center;
position: relative;
z-index: 1;
color: #fff;
}

.icon-mix .icon {
background: rgba(255, 255, 255, 0.1);
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}

.icon-mix .icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
opacity: 0;
-webkit-transform: scale(0.9);
transform: scale(0.9);
}

.icon-mix .icon:hover {
background: rgba(255, 255, 255, 0.05);
-webkit-transform: scale(0.93);
transform: scale(0.93);
color: #fff;
}

.icon-mix .icon:hover:after {
-webkit-animation: roundout 1.3s ease-out 75ms;
animation: roundout 1.3s ease-out 75ms;
}

@-webkit-keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
-webkit-transform: scale(1.5);
opacity: 0;
}
}

@keyframes roundout {
0% {
opacity: 0.3;
}
40% {
opacity: 0.5;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
}
100% {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);
transform: scale(1.5);
opacity: 0;
}
}
</style>
</head>

<body>
<div class="icon-mix">
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
<a href="javascript:;" class="icon"></a>
</div>
</body>

</html>原本是帮一个妹纸写的效果结果理解错误了哈哈? 查看全部

<!DOCTYPE html>

<html>



	<head>

		<meta charset="utf-8" />

		<title></title>

		<meta name="description" content="">

		<meta name="HandheldFriendly" content="True">

		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<meta name="apple-mobile-web-app-capable" content="yes">

		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<meta name="format-detection" content="telephone=no">

		<style>

			html,

			body {

				height: 100%;

				background-color: rgb(56, 81, 188);

			}

			

			.icon {

				display: inline-block;

				font-size: 0px;

				cursor: pointer;

				margin: 60px 120px;

				width: 90px;

				height: 90px;

				border-radius: 50%;

				text-align: center;

				position: relative;

				z-index: 1;

				color: #fff;

			}

			

			.icon-mix .icon {

				background: rgba(255, 255, 255, 0.1);

				-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;

				transition: transform ease-out 0.1s, background 0.2s;

			}

			

			.icon-mix .icon:after {

				pointer-events: none;

				position: absolute;

				width: 100%;

				height: 100%;

				border-radius: 50%;

				content: '';

				top: 0;

				left: 0;

				padding: 0;

				z-index: -1;

				box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);

				opacity: 0;

				-webkit-transform: scale(0.9);

				transform: scale(0.9);

			}

			

			.icon-mix .icon:hover {

				background: rgba(255, 255, 255, 0.05);

				-webkit-transform: scale(0.93);

				transform: scale(0.93);

				color: #fff;

			}

			

			.icon-mix .icon:hover:after {

				-webkit-animation: roundout 1.3s ease-out 75ms;

				animation: roundout 1.3s ease-out 75ms;

			}

			

			@-webkit-keyframes roundout {

				0% {

					opacity: 0.3;

				}

				40% {

					opacity: 0.5;

					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);

				}

				100% {

					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);

					-webkit-transform: scale(1.5);

					opacity: 0;

				}

			}

			

			@keyframes roundout {

				0% {

					opacity: 0.3;

				}

				40% {

					opacity: 0.5;

					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);

				}

				100% {

					box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255, 255, 255, 0.5);

					transform: scale(1.5);

					opacity: 0;

				}

			}

		</style>

	</head>



	<body>

		<div class="icon-mix">

			<a href="javascript:;" class="icon"></a>

			<a href="javascript:;" class="icon"></a>

			<a href="javascript:;" class="icon"></a>

		</div>

	</body>



</html>

原本是帮一个妹纸写的效果结果理解错误了哈哈?

Gif

扯蛋 • 戏子发表了文章 • 0 个评论 • 1406 次浏览 • 2016-01-18 16:16 • 来自相关话题

?

bootstrap modal 相关问题集锦！

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2271 次浏览 • 2016-01-13 11:35 • 来自相关话题

Q:Modal 点击后仅显示黑色半透背景而modalbody 主题在其背面？
源文件库是否与API 一致插件加载过多冲突JQ版本过低？？（本人未作验证真实性有待考究）
Q：modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明只是是英文的而且bootcss也未能详细的翻译该节点
实现方法
方法1$('#myModal').modal({
keyboard: false;//禁用键盘ESC 关闭
backdrop: false;//禁用非modal外半透背景点击关闭
})方法2data-backdrop="false"(html5 data 调用)

Q:在Modal中使用datepicker 错位?(该章节由戏子提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:container
String. Default: “body”
Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)示例如下:
html<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">
<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">
<form>
<div class="form-group" style="position:relative;">
<label for="exampleInputEmail1">Datetimepicker</label>
<input type="text" class="form-control" id="datetimepicker">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>js $(function() {
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii',
container : '#myModal .form-group'
});
}); 查看全部

Q:Modal 点击后仅显示黑色半透背景而modalbody 主题在其背面？

源文件库是否与API 一致
插件加载过多冲突
JQ版本过低？？（本人未作验证真实性有待考究）

Q：modal 如何设置点击除modal主体外其他地方不关闭modal

这个问题其实API 有说明只是是英文的而且bootcss也未能详细的翻译该节点
实现方法
方法1

$('#myModal').modal({

  keyboard: false;//禁用键盘ESC 关闭

  backdrop: false;//禁用非modal外半透背景点击关闭

})

方法2

data-backdrop="false"(html5 data 调用)

Q:在Modal中使用datepicker 错位?(该章节由戏子提供)
bootcss上未注明该插件的container用法(大多数人知晓这个插件也源自该网站)
而官方的API中是这么说的:

container

String. Default: “body”

Appends the date picker popup to a specific element; eg: container: ‘#picker-container’ (will default to “body”)

示例如下:
html

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: block; padding-right: 17px;">

        <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">

                    <form>

                        <div class="form-group" style="position:relative;">

                            <label for="exampleInputEmail1">Datetimepicker</label>

                            <input type="text" class="form-control" id="datetimepicker">

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>

            </div>

        </div>

    </div>

js

    $(function() {

        $('#datetimepicker').datetimepicker({

        	format: 'yyyy-mm-dd hh:ii',

        	container : '#myModal .form-group'

        });

    });

Gif

扯蛋 • 戏子发表了文章 • 1 个评论 • 1373 次浏览 • 2016-01-13 09:31 • 来自相关话题

?

通知设置新通知

发现