小编Dev*_*vin的帖子
自定义Bootstrap CSS模板
我刚从Twitter开始使用Bootstrap,我想知道什么是"最佳实践"用于定制.我想开发一个系统,该系统将利用一个CSS模板的所有电源(引导或其他),彻底(容易地)修改的,是可持续的(即 - 当引导的下一个版本是从Twitter的我不要公布"我必须重新开始.
例如,我想在顶部导航中添加背景图像.看起来有三种方法可以解决这个问题:
- 修改bootstrap.css中的.topbar类.我不是特别喜欢这个,因为我会有很多.topbar项目,我不一定要以同样的方式修改它们.
- 使用我的背景图像创建新类并应用这两种样式(new和bootstrap到我的元素).这可能会产生样式冲突,可以通过将.topbar类剥离到单独的类中然后仅使用我的自定义类未处理的部分来避免这种冲突.同样,这需要比我认为必要的更多工作,虽然它很灵活,但是当Twitter发布下一部分时,它不允许我轻松更新bootstrap.css.
- 使用.LESS中的变量来实现自定义.这似乎是一个很好的方法,但没有使用过.很少我担心在客户端编译css和代码可持续性.
虽然我使用的是Bootstrap,但这个问题可以推广到任何css模板.
提前感谢您的意见.
推荐指数
解决办法
查看次数
如何使用Bootstrap选项卡加载AJAX？
我使用了bootstrap-tabs.js,它运行得很好.
但我没有找到有关如何通过AJAX请求加载内容的信息.
那么,如何使用bootstrap-tabs.js加载AJAX？
推荐指数
解决办法
查看次数
全身背景与Twitter Bootstrap
我正在尝试使用Twitter的Bootstrap框架开发一个新项目,但我遇到了问题.我想要一个完整的身体背景,但背景似乎仅限于容器div的高度.这是HTML/CSS代码:
<!doctype html>
<html lang="en">
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<title>Bootstrap Issue</title>
<style>
body { background: black; }
.container { background: white; }
</style>
</head>
<body>
<div class="container">
<h1> Hello, World!</h1>
</div>
</body>
</html>
如何让身体占据整个屏幕？
推荐指数
解决办法
查看次数
bundle失败 - 找不到PostgreSQL客户端库(libpq)
我想我已经尝试了所有关于这个问题的建议.仍然不适合我.
当我尝试捆绑...
$ bundle
...
Gem::Installer::ExtensionBuildError: ERROR: Failed to build gem native extension.
/System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/ruby extconf.rb
checking for pg_config... yes
Using config values from /usr/local/bin/pg_config
checking for libpq-fe.h... yes
checking for libpq/libpq-fs.h... yes
checking for pg_config_manual.h... yes
checking for PQconnectdb() in -lpq... no
checking for PQconnectdb() in -llibpq... no
checking for PQconnectdb() in -lms/libpq... no
Can't find the PostgreSQL client library (libpq)
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers. …推荐指数
解决办法
查看次数
Twitter Bootstrap的文本输入呈现问题
我正在尝试使用Twitter的bootstrap快速几页.我在获取文本字段时遇到问题,就像在http://twitter.github.com/bootstrap/上一样
我的HTML看起来像
<div class="clearfix">
<label for="unit">unit</label>
<div class="input">
<input class="xlarge" id="unit" name="unit" type="text" value="" />
</div>
</div>
这似乎是我在演示页面上看到的所有相关CSS类.但是,我的文本输入字段在输入区域垂直方向上渲染太小,因此光标和文本与输入区域的底部边框重叠.这是win7上最新的chrome.
推荐指数
解决办法
查看次数
Twitter Bootstrap不能与less.js一起使用
我把它分解成最简单的形式,但仍然无法找出为什么这不起作用.解析所有文件并加载Bootstrap中的导入,但不加载样式.
bootstrap 1.4.0 less 1.1.3
<html>
<head>
<title>ahhhhhh...</title>
<link rel="stylesheet/less" href="/less/bootstrap/1.4.0/bootstrap.less">
<script src="/less/less-1.1.3.min.js"></script>
</head>
<body>
<h1>WTF!!!</h1>
</body>
</html>
我做了一个简单的style.less工作正常!我错过了一些明显的东西吗？
更新:
没有托德所要求的那种风格:
@primary_color: green;
h1 {
color: @primary_color;
}
推荐指数
解决办法
查看次数
jQuery分页+ Twitter Bootstrap
我正在尝试修改Jquery分页(基于此Jquery分页教程 - 演示)以使用令人敬畏的twitter引导程序.
Twitter Bootstrap的标准分页设置如下所示,因此这是分页输出结构的目标.
<div class="pagination">
<ul>
<li class="prev disabled"><a href="#">← Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">Next →</a></li>
</ul>
</div>
到目前为止,我可以通过更改html输出结构来使其工作,但由于我将输出更改<a>为<li>标记,因此活动突出显示无法正常工作.
我仍然需要做以下事情:
prev在第一页时禁用按钮- 更改
<li>页面时更改活动 next在最后一页上禁用按钮- 修复
prev按钮,使其再次工作 - 修复下一个按钮,使其再次工作
推荐指数
解决办法
查看次数
如何使用Bootstrap垂直和水平居中一个块？
我有这样的形式:
<div class="container-fluid">
<div class="span5 well">
<h2>Authentification</h2>
<form method="POST">...</form>
</div>
</div>
我怎样才能将该块(div span5井)垂直和水平居中？谢谢.
推荐指数
解决办法
查看次数
如何在Chrome Packaged Apps中使用自定义/外部字体图标
我有一个用AngularDart编写的Chrome打包应用程序,并尝试获取一些外部图标以使应用程序看起来更好,但无法通过网络找到任何示例.尝试了很多东西以及下面的解决方法,但无法使其正常工作.我将@ font-face添加到我的css中,如下所示:
@font-face {
font-family: 'Icons';
src: url(data:font/ttf;charset=utf-8;base64,<ttf file encoded to base64>) format('truetype'),
url(data:font/woff;charset=utf-8;base64,<woff file encoded to base64>) format('woff'),
url(data:font/svg;charset=utf-8;base64,<svg file encoded to base64>) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-uniF085:before {
content: "\f085";
}
我试图通过将我的图标文件:.ttf,.woff,.svg,.eot转换为base64并将它们嵌入到我的控制器CSS中来避免CSP(内容安全策略)问题但是当我运行应用程序时我在铬中看到的全部内容是默认的方框而不是我引用的图标(); 控制台或Chrome浏览器上没有错误.我想知道是否有人使用Chrome打包应用程序使用自定义或外部图标/字体.如果有任何解决方法,请告诉我.
推荐指数
解决办法
查看次数
使用jQuery和Knockout验证插件的CSS问题
问题:触发验证时CSS没有被更改
场景:在我的项目中,我使用的是jQuery验证和淘汰验证.在淘汰赛中,我有一个父模型绑定和子模型,它们是在按钮点击事件中动态生成的.
验证:对于父模型绑定我有jQuery验证(使用模型验证),但对于子模型,我有敲门验证(因为模型中没有提到属性)
问题:验证消息正在显示,但css错误类没有得到绑定.对于我已经提到的淘汰验证
ko.validation.init({
registerExtenders: true,
messagesOnModified: false,
insertMessages: false,
decorateElement: true,
errorElementClass: 'input-validation-error',
errorMessageClass: 'field-validation-error'
});
淘汰赛版本:淘汰赛:3.0.0
推荐指数
解决办法
查看次数
标签 统计
css ×7
javascript ×3
html ×2
jquery ×2
ajax ×1
angular-dart ×1
bootswatch ×1
bundle ×1
dart ×1
icons ×1
knockout.js ×1
less ×1
pagination ×1
postgresql ×1
ruby ×1
validation ×1