bootstrap 3版本是否与当前的AngularJS bootstrap指令兼容？
我想在AngularJS中使用Bootstrap 2.3.1指令:
http://angular-ui.github.io/bootstrap/
使用Bootstrap 3.0.0 CSS:
https://github.com/twitter/bootstrap/tree/3.0.0-wip/
为什么？
AngularJS团队仍在研究v2.3.1的JS指令,需要时间赶上v3.0.0.我想现在开始使用v3 CSS网格语法.
javascript css twitter-bootstrap angularjs twitter-bootstrap-3
我正在开发一个刚开始的Rails项目.我们想使用twitter bootstrap作为我们样式的基础,一开始我们只是直接在HTML代码上使用bootstrap的类名,就像bootstrap的文档中所示,但在阅读以下帖子之后:
很明显为什么这不适合使用bootstrap,所以经过一些更多的阅读:
除此之外,似乎使用sass @extend是避免使用bootstrap的类名的正确方法,所以不要这样做:
<button type="submit" class="btn">Search</button>
我们会这样做:
<button type="submit" class="button">Search</button>
我们的sass代码看起来像这样:
.button {
@extend ".btn";
}
这种方法的问题,除了每次我们扩展引导类只是为了使用不同名称时将添加的一堆额外选择器,在引导程序使用这样的选择器的情况下:
.form-search .input-append .btn, .form-search .form-input-append .btn {
border-radius: 0 14px 14px 0;
}
该按钮将无法获得正确的样式,因为sass不会将相同的规则应用于我们的自定义类名称,我的意思是,sass 不会这样做:
.form-search .input-append .btn, .form-search .input-append .button,
.form-search .form-input-append .btn, .form-search .form-input-append .button {
border-radius: 0 14px 14px 0;
}
所以我想知道,这是避免将bootstrap的类名嵌入HTML的正确方法,如果是这样,我该如何处理这个问题(经常发生)？如果没有,那么使用自定义类名称但仍然从引导程序获取样式的更好方法是什么.
我非常感谢你对此的看法.请记住,我只是在学习整体网页设计(css,sass,less,html,js等).
下拉菜单在Angular-UI-Bootstrap中不起作用？使用Bootstrap-3 CSS
以下是代码.链接Click me for a dropdown显示出来.但是不要在点击时切换.怎么了？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script>function DropdownCtrl($scope) {
$scope.items = [
"The first choice!",
"And another choice for you.",
"but wait! A third!"
];
}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script><script type="text/javascript" src="js/ui-bootstrap-tpls-0.5.0.min.js"></script><script type="text/javascript" src="js/dropdownToggle.js"></script>
</head>
<body>
<li ng-controller="DropdownCtrl" class="dropdown">
<a href='#' class="dropdown-toggle"> Click me for a dropdown </a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items"><a>{{choice}}</a>
</li>
</ul>
</li>
</body>
</html>
twitter-bootstrap angular-ui angular-ui-bootstrap twitter-bootstrap-3