Bra*_*rad 1 html css less twitter-bootstrap
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="./assets/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.css" />
<script src="./assets/js/less.js" type="text/javascript"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">nav ul li a</a></li>
<li><a href="#">nav ul li a</a></li>
<li><a href="#">nav ul li a</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<div class="promo-pod">
<p>Promo pod Promo pod Promo pod Promo pod</p>
<p>Promo pod Promo pod Promo pod Promo pod</p>
<p>Promo pod Promo pod Promo pod Promo pod</p>
<p>Promo pod Promo pod Promo pod Promo pod</p>
<p>Promo pod Promo pod Promo pod Promo pod</p>
</div>
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<h3>Footer</h3>
</footer>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--<script src="assets/bootstrap/js/bootstrap.js"></script>-->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
</body>
</html>
我不太喜欢隐藏促销活动:
.main-container {
.container();
.make-row();
.main.wrapper {
.make-column(12);
}
.promo-pod {
border:1px solid red;
.hidden-lg;
.make-column(3);
}
}
我决定将div class ="promo-pod"更改为div class ="span4 hidden-lg"并隐藏div,但当它只是div class ="promo-pod"时,所有规则都适用,除了.hidden -LG;
每次保存文件时,较少的文件编译正确,任何帮助表示赞赏.
将名称更改为促销,因为很长,所以在这个要点中搜索促销https://gist.github.com/anonymous/6174366
注意:截至2013年8月,已在Bootstrap中修复此问题,因此不再需要下面的解决方法.(https://github.com/twbs/bootstrap/pull/9211)
Bootstrap的响应式mixin不是为了处理你想要完成的事情而构建的.
闲逛在响应-utilities.less和mixins.less,你会看到,响应实用工具类(.hidden-lg,.visible-lg,等)实际上并不包含任何@media查询,因此它们嵌入在你的CSS不会让他们做出反应屏幕尺寸变化.要使这些类正常工作,需要将它们直接添加到HTML中.
但作为一种解决方法,您可以复制Bootstrap的@media查询,responsive-utilities.less并直接将可见性mixins应用于您的样式:
.promo-pod {
/* Turn element off for all screens */
.responsive-invisibility();
/* Turn element back on for large screens */
@media (min-width: @screen-desktop) {
.responsive-visibility();
}
}
它不是一个完美的解决方案,但除非Bootstrap重新构建其可见/隐藏样式,否则它是您可以做的最好的解决方案.
编辑(替代解决方案):
如果您想首先在CSS中直接使用.visible-sm,.visible-lg等等,请将此代码段添加到LESS文件中:
.visible-sm {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
@media (min-width: @screen-desktop) { .responsive-invisibility(); }
}
.visible-md {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
@media (min-width: @screen-desktop) { .responsive-invisibility(); }
}
.visible-lg {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
@media (min-width: @screen-desktop) { .responsive-visibility(); }
}
.hidden-sm {
.responsive-invisibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
@media (min-width: @screen-desktop) { .responsive-visibility(); }
}
.hidden-md {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); }
@media (min-width: @screen-desktop) { .responsive-visibility(); }
}
.hidden-lg {
.responsive-visibility();
@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); }
@media (min-width: @screen-desktop) { .responsive-invisibility(); }
}
然后你可以这样做:
.promo-pod {
.visible-lg;
}
它只是重新组织Bootstrap的响应实用程序responsive-utilities.less.(我可以向Bootstrap添加一个pull请求,看看这样的东西是否可以被拉进master分支.)
| 归档时间： |
|
| 查看次数： |
5422 次 |
| 最近记录： |