Twitter bootstrap 具有引导功能的Dropbox类登录页
我对UI和twitter引导非常陌生。如果我想设计一个类似于的登录页面,有人能告诉我如何从twitter引导开始吗。我浏览了bootstrap的文档和示例。但如果有人能明确指出我应该使用哪种布局/导航/其他divTwitter bootstrap 具有引导功能的Dropbox类登录页,twitter-bootstrap,Twitter Bootstrap,我对UI和twitter引导非常陌生。如果我想设计一个类似于的登录页面,有人能告诉我如何从twitter引导开始吗。我浏览了bootstrap的文档和示例。但如果有人能明确指出我应该使用哪种布局/导航/其他div 谢谢 这种类型的布局可以通过堆叠引导网格元素来轻松实现,以创建您在页面上看到的三个部分;菜单、内容、页脚。菜单项可以通过使用bootstraps下拉菜单来实现,您只需按照您想要的方式设置它们的样式即可 这是该布局的基本细分: HTML <div class="content"&g
谢谢 这种类型的布局可以通过堆叠引导网格元素来轻松实现,以创建您在页面上看到的三个部分;菜单、内容、页脚。菜单项可以通过使用bootstraps下拉菜单来实现,您只需按照您想要的方式设置它们的样式即可 这是该布局的基本细分: HTML
<div class="content">
<div class="container">
<div class="row">
<div class="span12">
...navbar...
</div>
</div>
<div class="row">
<div class="span8 offset2">
...content...
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span2">
...list menu...
</div>
<div class="span2">
...list menu...
</div>
<div class="span2">
...list menu...
</div>
<div class="span2 pull-right">
...dropup menu...
</div>
</div>
</div>
<div class="content">
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<div class="btn-group pull-right">
<a data-toggle="dropdown" class="btn btn-simple dropdown-toggle" href="#"><i class="icon-fire"></i> Dropdown <b class="caret"></b></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form>
<input style="margin-bottom: 15px;" type="text">
<input style="margin-bottom: 15px;" type="password">
<input style="float: left; margin-right: 10px;" type="checkbox">
<label for="user_remember_me"> Remember me</label>
<input class="btn btn-primary" style="clear: left; width: 100%; height: 32px; font-size: 13px;" value ="Submit" type="submit">
</form>
</div>
</div>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div>
</div>
</div>
<div class="row">
<div class="span8 offset2">
<h1>Title</h1>
<a class="play" href="#">
<img src="https://www.dropbox.com/static/images/watch_a_video2.png">
</a>
<div class="big-btn">
<a href="#" class="btn btn-primary">Download</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span2">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ul>
</div>
<div class="span2">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ul>
</div>
<div class="span2">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit</li>
</ul>
</div>
<div class="span2 pull-right">
<div class="btn-group dropup pull-right">
<a href="#" data-toggle="dropdown" class="btn btn-simple dropdown-toggle"><i class="icon-globe"></i> Inverse <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</div>
下面是这个布局的一个演示:运行,编辑。man这太棒了。谢谢你的努力!如果可以的话,我会不止一次地更新这篇文章。安德烈斯·利奇:出于某种原因,下拉菜单在我的系统中不起作用。它正在打开菜单,但当我单击菜单内部时,它没有挂在那里(例如电子邮件字段)。我使用的是
twitter引导rails
gem。我甚至在.js文件中添加了$('.dropdown toggle').dropdown()
这一行,但仍然没有luck@BhushanLodha查看我在JSFIDLE上的演示,我添加了一个jquery代码片段来修复该行为:仍然不工作。至少有一个用于在点击按钮后获取下拉菜单的按钮不是我不获取anything@BhushanLodhajquery是在引导插件之前加载的吗?
.content {
text-align:center;
margin:0 0 60px;
}
.navbar-inner {
background-color: transparent;
background-image: none;
background-repeat: no-repeat;
box-shadow: none;
color:black;
}
.navbar .nav > li > a {
color:black;
text-shadow:none;
}
.navbar .nav > li > a:hover {
color:#333;
}
.navbar .nav li.dropdown .dropdown-toggle .caret, .navbar .nav li.dropdown.open .caret {
border-bottom-color: #000000;
border-top-color: #000000;
}
.btn-simple {
background-color:transparent;
background-image:none;
}
.big-btn {
margin: 80px 0 108px;
}
.big-btn .btn {
border-radius: 6px 6px 6px 6px;
display: inline-block;
font-size: 30px;
line-height: 1;
margin-bottom: 27px;
padding: 19px 24px;
text-align: center;
width: 60%;
}
.navbar-inner {
padding-left: 0;
padding-right: 0;
}
.play {
margin:20px 0;
display:block;
}