小编amp*_*ine的帖子
Handlebars.js和Bootstrap网格 - 在行中包裹列
我相信我需要一个自定义的Handlebars.js Block Helper来处理基于Bootstrap的网格系统中的行.我想要包装的每3件物品<div class="row"></div>
期望的输出
<div class="row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
模板:
{{#employees}}
<div class="col-sm-4">
<strong>{{name}}</strong><br>
{{title}}<br>
{{skills}}
</div>
{{/employees}}
数据
var data = {
"employees" : [
{
"name":"Fred Flintstone",
"title":"Frontend Developer",
"skills" : "html,css,javascript"
},
{
"name":"Sally Struthers",
"title":"Frontend Developer",
"skills" : "html,css,javascript"
},
{
"name":"Ben Wilson",
"title":"Frontend Developer",
"skills" : "html,css,javascript"
},
{
"name":"Julie Milson",
"title":"Frontend Developer",
"skills" : "html,css,javascript"
},
{
"name":"Mike Barton",
"title":"Frontend Developer",
"skills" : "html,css,javascript"
}
]
}
帮助者概念 …
javascript handlebars.js twitter-bootstrap twitter-bootstrap-3
推荐指数
解决办法
查看次数
Bootstrap CSS在本地托管时无法正确加载字体
我目前有一个webapp,目前看起来像这样
目录:
|-- index.jsp
|-- css
|-- bootstrap.min.css
|-- fonts
|-- glyphicons-halflings-regular.eot
|-- glyphicons-halflings-regular.svg
|-- glyphicons-halflings-regular.ttf
|-- glyphicons-halflings-regular.woff
|-- glyphicons-halflings-regular.woff2
index.jsp:
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- <link rel="stylesheet" href="css/bootstrap.min.css" /> -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
</head>
<body>
<input id="username" name="username" class="required" tabindex="1" placeholder="Username" type="text" /><span id="usernameTip" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-question-sign"></span>
<input id="password" name="password" class="required" tabindex="2" placeholder="Password" type="password" /><span id="passwordTip" data-toggle="tooltip" data-placement="right" class="glyphicon glyphicon-question-sign"></span>
</body>
</html>
暂时,我正在为我的库文件使用CDN,但我想在本地托管这些文件.但是,当我在本地使用Bootstrap文件时,特别是CSS时,字形不会出现在IE10中.在挖掘了一大堆之后,我注意到在CDN上托管bootstrap.min.css与本地托管之间存在差异. …
推荐指数
解决办法
查看次数
angular-bootstrap折叠表行动画没有顺利过渡
我遇到了angular-bootstrap collapse指令和CSS的问题.基本上,当您将指令"collapse"添加到div时,它可以正常工作.但是当您尝试展开/折叠表格行时,似乎存在转换效果的一些问题.
HTML:
<div ng-controller="dogCtrl">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Breed</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="dog in dogs">
<td><a href="#" ng-click="isCollapsed = !isCollapsed">{{dog.name}}</a></td>
<td>{{dog.breed}}</td>
</tr>
<tr collapse="isCollapsed" ng-repeat-end="">
<td colspan="3">
<h3>Pet details</h3>
<p>some details about this pet.</p>
</td>
</tr>
</tbody>
</table>
</div>
控制器:
var app = angular.module('dogApp', ['ui.bootstrap']);
app.controller('dogCtrl', function($scope) {
$scope.isCollapsed = true;
$scope.dogs = [
{
name: "Sparky",
breed: "Parson Russell Terrier"
}, {
name: "Shep",
breed: "German Shepard"
}
];
});
Codepen示例:http://codepen.io/anon/pen/qEoOBq
twitter-bootstrap angularjs angularjs-directive angular-bootstrap
推荐指数
解决办法
查看次数
滚动时设置Bootstrap导航栏透明度
我使用一个名为custom.css的辅助文件来覆盖引导程序代码,我想知道如何创建一个仅在我的网站访问者不在页面顶部时激活的代码.
到目前为止,我使用bootstrap提供的默认代码创建了一个透明的导航栏.我唯一要做的就是将其设置为执行:background-color: #color当访问者向下滚动时.
当我在页面顶部时,导航栏是透明的,但当我向下滚动时,它变得不透明.
推荐指数
解决办法
查看次数
asp.net按钮/ linkbutton webcontrol动态添加在bootstrap模态体中不回发
我已经动态地在html表中添加了linkbutton并添加到bootstrap模式的主体中.(linkbutton编码linkbutton.click + = new eventhandler(Eventclick1);)
但是,当我点击选择时,它将不会转到我的功能Eventclick1.它只刷新整个页面.(它已经在updatepanel内).无论如何我可以让select按钮回发？(我不想添加客户端点击功能onclientclick = $('#otherbutton').click();)
UPDATE
lnk_button.ID = this.ID + "AuditSelectedRow_" + Convert.ToString(l_loop);
lnk_button.Click += new EventHandler(OnAuditRowSelected);
lnk_button.Text = "Select";
WebControl wc_tdSelect = new WebControl(HtmlTextWriterTag.Td);
wc_tdSelect.Controls.Add(lnk_button);
推荐指数
解决办法
查看次数
Bootstrap div延伸到页面底部
我有默认的bootstrap模板设置,我的问题是div和页脚之间有空格.白色空间是由于没有足够的内容来填充整个页面而引起的,因此正文显示在页脚和内容div之间.有没有办法将引导div拉伸到页面底部,同时还使页脚保持在最底部？可能有柔性盒？
这是我正在使用的代码:(尝试将"包装器"div拉伸到页脚)
HTML
<body ng-app="firstApp">
<div ng-view="" class="everything">
<div class="wrapper">
<div class="mid">
<div class="row">
<div class="col-sm-12">
<p>This is in a div that should fill the screen</p>
</div>
</div>
</div>
<div class="push"></div>
</div>
<footer class="footer">
<div class="container">
<p>Hello I'm the footer</p>
</div>
</footer>
</div> <!--closes the "everything" class -->
CSS
html {
height: 100%;
}
body {
height: 100% !important;
font-family: 'Roboto', sans-serif;
color: black;
background: green;
}
.footer {
text-align: center;
padding: 30px 0;
height: 4em;
background-color: #7ccbc8;
width: 100%; …推荐指数
解决办法
查看次数
页面加载时Bootstrap模式打开
我有一个带有bootstrap模式的页面(手册:http://getbootstrap.com/javascript/#modals).
我想在页面加载时打开这个模态.然而,这并没有发生.
<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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="memberModalLabel">Thank you for signing in!</h4>
</div>
<div class="modal-body">
<p>However the account provided is not known.<BR>
If you just got invited to the group, please wait for a day to have the database synchronized.</p>
<p>You will now be shown the Demo site.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> …推荐指数
解决办法
查看次数
如何在Bootstrap DateTimePicker中禁用时间？
我想在没有选择时间的情况下使用bootstrap datetimepicker,但它不起作用.我给pickTime参数赋予了false值,但它仍然无效.但格式和语言参数正常.
这是代码!我怎样才能解决这个问题？
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
format: "dd MM yyyy",
pickTime: false,
autoclose: true,
todayBtn: true,
language: 'tr',
pickerPosition: "bottom-right"
});
});
</script>
<div class='input-group date' id='datetimepicker1'>
<span class="input-group-addon">Birtdate</span>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"> </span>
</span>
</div>
javascript jquery datetimepicker twitter-bootstrap twitter-bootstrap-3
推荐指数
解决办法
查看次数
Font-Awesome css无法在本地工作
我想在不使用cdn的情况下在本地使用Font Awesome.
我的代码无法为我的页面添加字体真棒图标.
我可以使用cdn链接轻松地工作,但本地链接无法执行任何操作.
谢谢
杰森.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>How it Works | Rubberdesk </title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font-Awesome CSS -->
<link href="/font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
推荐指数
解决办法
查看次数
Angular:从FileReader返回Observable/ES6 Promise
我试图返回结果FileReader,我发现了这个实现.但由于它已经过时,我想知道如何使用ES6 Promises或Rx 实现相同的功能Observables.
下面是我的代码,参考上述链接,它按预期工作.
import { Injectable } from '@angular/core';
import * as XLSX from 'xlsx';
import * as XLS from 'xlsx';
@Injectable()
export class ExcelReaderService {
constructor() { }
importFromExcel(ev): JQueryPromise<any> {
let deferred = $.Deferred();
let regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xlsx|.xls)$/;
let workbook;
let excelInJSON;
if (regex.test(ev.target.files[0].name.toString().toLowerCase())) {
let xlsxflag = false; /*Flag for checking whether excel is .xls format or .xlsx format*/
if (ev.target.files[0].name.toString().toLowerCase().indexOf(".xlsx") > 0) {
xlsxflag = true;
}
let …推荐指数
解决办法
查看次数
标签 统计
css ×4
html ×3
javascript ×2
jquery ×2
modal-dialog ×2
angular ×1
angularjs ×1
asp.net ×1
c# ×1
es6-promise ×1
font-awesome ×1
footer ×1
navbar ×1
observable ×1
rxjs ×1
typescript ×1