gpt4 book ai didi

css - 如何使用 LESS 使用 Twitter Bootstrap 创建流畅的语义布局?

转载 作者:行者123 更新时间:2023-12-04 22:34:58 24 4
gpt4 key购买 nike

我想使用 LESS 创建流畅的布局,而不是在 html 代码上使用像 .span6 这样的 Bootstrap 网格类。我怎样才能做到这一点?当我在没有 LESS 的情况下写作时,我创建了这样的布局:

<div class="container-fluid">

<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Pages</a></li>
<li><a href="#">Typography</a></li>
<li><a href="#">UI</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Tables</a></li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Change password</a></li>
<li><a href="#">Log in with another user</a></li>
<li><a href="#">Change token</a></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
</div>
</div>

<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">

现在,我的布局如下所示:

<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
</div>
<div id="logout">
<a href="#">Logout</a>
</div>
</div>
<div id="slider">

如果我想制作 div#wrap -> .container-fluid,我应该在我的 .less 文件中写些什么,div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2不用在 html 代码上写这个类?

最佳答案

首先,这不会是真正的语义,至少不会再是。

<div id="top-menu">的语义形式是<nav><nav id="top">

<div id="header">的语义形式是<header>

无论如何,这里有关于这样做的说明:

Please stop embedding Bootstrap classes in your HTML

不过,老实说,它并不像作者说的那么简单。仅仅因为你有一个 <nav>继承 .nav 的样式来自 Bootstrap 并不意味着它的 child 也将继承继承的样式。

因此,如果我从 .nav ul 定义样式, 一个 <ul>如果元素位于 <nav> 中,则不会接收此样式.

关于css - 如何使用 LESS 使用 Twitter Bootstrap 创建流畅的语义布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12820173/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com