Tag: twitter bootstrap

在twitter引导模式下的自动对焦input

我有这样的问题 – 我需要在twitter引导模式(显示后)自动对焦一些元素。 棘手的部分在这里 – 这个模式的内容是从单独的HTML文件使用“数据远程”(jQuery.load方法)加载,所以 $(document).on('shown', ".modal", function() { $('[autofocus]', this).focus(); }); 只有在模态被加载之前工作。 问题是 – 如何使自动对焦在第一次模态加载工作?

在Bootstrap v4中缺less可见的 – **和隐藏的**

在Bootstrap v3中,我经常使用与clearfix结合的隐藏类来控制不同屏幕宽度的多列布局。 例如, 我可以将多个隐藏的**组合在一个DIV中,使我的多列在不同的屏幕宽度下正确显示。 例如,如果我想要显示产品照片的行,在较大的屏幕尺寸上每行4个,在较小的屏幕上显示3个,然后在非常小的屏幕上显示2个。 产品照片可能会有不同的高度,所以我需要clearfix来确保正确的行分割。 这是v3中的一个例子 现在v4已经取消了这些类,取而代之的是可见/隐藏 – ** – 向上/向下类,我似乎必须用多个DIV来做同样的事情。 这里有一个类似的例子在v4中… 所以我已经从单一的DIV变成了需要添加多个DIV的上/下类来达到同样的效果。 从… <div class="clearfix visible-xs-block visible-sm-block"></div> 至… <div class="clearfix hidden-sm-up"></div> <div class="clearfix hidden-md-up hidden-xs-down"></div> <div class="clearfix hidden-md-down"></div> 有没有更好的方法来做到这一点,我已经忽略了?

在构buildTwitter Bootstrap时,让jshint忽略某些文件

当使用Twitter Bootstrap与其他第三方JS库(例如WordPress“Twenty Twelve”主题中的html5.js时,我经常遇到这个问题,由于jshint (或者以前的TB版本中的jslint )会导致构build失败由于第三方JS库的错误,例如 \n################################################## Building Bootstrap… ##################################################\n js/html5.js: line 3, col 122, Expected ')' to match '(' from line 3 and instead saw ','. js/html5.js: line 3, col 140, Expected an identifier and instead saw ')'. js/html5.js: line 4, col 101, eval is evil. js/html5.js: line 6, col 369, Confusing use of '!'. […]

Rails Active Admin css与Twitter Bootstrap css冲突

我对Rails资产pipe道有点新鲜,所以我可能做错了什么。 我正在尝试为我的后端应用Active Admin和我的前端应用程序的twitter引导CSS。 我将bootstrap.css添加到/ app / assets / stylesheets,然后添加: //= require bootstrap 到application.css – 然后我做了本地资产的预编译 它似乎工作正常,但一些样式并不完全通过,我认为这是因为积极的pipe理的CSS是压倒一切的。 我的理解是应用程序将css资源编译到应用程序的css公共资产中,并且应用程序在运行时使用该文件。 我需要以某种方式将两者分开,并使用twitter引导CSS作为前端的主要CSS,也许告诉它不要在前端使用活动pipe理的CSS文件。 什么是最好的方法来做到这一点?

Bootstrap充分响应导航栏与标志或品牌名称文本

我想在Twitter Bootstrap 3.1.1中做一个具有指定高度的完全响应式导航栏,品牌可以由图片(标识)或文本组成。 HTML: <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"> <img src="http://placehold.it/150×50&text=Logo" alt=""> </a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> CSS: […]

里面的<div>块是否正确?

我正在使用Bootstrap,它是横向格式的演示: <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail1" class="col-lg-2 control-label">Email</label> <div class="col-lg-10"> <input type="email" class="form-control" id="inputEmail1"> </div> </div> </form> 但我不想为每个<input>创buildID,所以 <form class="form-horizontal" role="form"> <div class="form-group"> <label class="block"> <span class="col-lg-2 control-label">Email</span> <div class="col-lg-10"> <input type="email" class="form-control"> </div> </label> </div> </form> 但display:block不能在里面display:inline ,所以我使用CSS .block { display: block; } 它正在工作,但它是正确的? 因为听说我们不应该把display:block元素放到display:inline element( label )

使用Spring MVC的Twitter Bootstrap

我想将Twitter Bootstrap与现有的Spring MVC项目集成在一起。 search返回的抽象结果没有任何教程或文章,概述了如何将面向用户界面的Bootstrap与Spring MVC集成。 涉及整合框架的configuration步骤是什么? 谢谢

Twitter Bootstrap和ASP.NET GridView

我从我的ASP.NET应用程序使用Twitter Bootstrap有问题 。 当我使用table table-striped css类到我的asp:GridView控件时, 它将表格的Header视为一个Row 。 我的GridView ASP.NET标记 <asp:GridView ID="dgvUsers" runat="server" CssClass="table table-hover table-striped" GridLines="None" AutoGenerateColumns="False"> <Columns> <asp:BoundField DataField="UserID" HeaderText="ID" Visible="false" /> <asp:BoundField DataField="Username" HeaderText="Username" /> <asp:BoundField DataField="FirstName" HeaderText="First Name" /> <asp:BoundField DataField="LastName" HeaderText="Last Name" /> </Columns> <RowStyle CssClass="cursor-pointer" /> </asp:GridView> 结果 <table id="cphMainContent_dgvUsers" class="table table-hover table-striped" cellspacing="0" style="border-collapse:collapse;"> <tbody> <tr> <th scope="col">Username</th> […]

我如何使用Django的Bootstrap?

我正在学习来自PHP的python和Django。 这真是令人兴奋,我很乐意使用Django的Bootstrap来创build性感的网页。 据我了解(我在他们的网站上的Django教程),Django使用“apps”,可以包含在settings.py文件中。 我做了一个快速search,发现了几个引导主题的应用程序,但没有关于如何select正确的应用程序的知识。 有大多数人使用的标准应用程序吗? 我需要的只是bootstrap.css和bootstrap.js文件。 我敢肯定,我可以手动将它们放在我的根目录下,但我喜欢Django安装中的“全包”设置。

JSFiddle中的外部资源(添加Twitter Bootstrap CDN)

我试图用JSFiddle复制我的问题,但是当需要的框架本身不受支持时,我相信我将需要从外部资源导入它们。 然而,点击+不会打开任何东西,我不知道如何处理URI字段。 简单的问题是,我特别需要embeddedBootstrap。 如何在Bootstrap中embeddedJSFiddle?