我有一些网页内容不多,页脚位于页面中间,但我希望它位于底部.
我已将所有页面都放在"持有者"中
#holder {
min-height: 100%;
position:relative;
}
Run Code Online (Sandbox Code Playgroud)
然后使用以下CSS作为我的页脚
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
Run Code Online (Sandbox Code Playgroud)
我的页脚的HTML
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by <a href="#">Fishplate</a></li>
<li>Email:exampleemail@gmail.com</li>
</ul>
</div>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
我想保持页脚流畅.
今天玩一些css3,主要是过渡.
我想要实现的是,在悬停一个li元素时,背景将从左到右填充不同的颜色,理想情况下我希望能够填充一半或一直..我已经开始了一个jsfiddle
我需要使用该属性吗?
-vendor-prefix transition
Run Code Online (Sandbox Code Playgroud)
请问有谁可以给我一些指示.
谢谢
我正在构建一个应用程序,用户可以在其中创建食谱,查看所有创建的食谱,在成员区域中查看自己的食谱,最后我希望用户在其帐户中添加"收藏夹".
我是Rails的新手但阅读了文档,这是我对后端应该是什么样子的理解.有人可以确认这看起来正确或建议任何错误,并解释我是否做错了(可能是这种情况)?
所以这是我的代码:
用户模型
has_many :recipes
has_many_favorites, :through => :recipes
Run Code Online (Sandbox Code Playgroud)
食谱模型
belongs_to :user
has_many :ingredients #created seperate db for ingredients
has_many :prepererations #created seperate db for prep steps
Run Code Online (Sandbox Code Playgroud)
喜欢的模特
belongs_to :user
has_many :recipes, :through => :user
#this model has one column for the FK, :user_id
Run Code Online (Sandbox Code Playgroud)
收藏控制器
def create
@favrecipes =current_user.favorites.create(params[:user_id])
end
Run Code Online (Sandbox Code Playgroud)
然后我想要一个按钮发布到数据库,所以我有这个:
<%= button_to("Add to Favorites" :action => "create", :controller => "favorites" %>
Run Code Online (Sandbox Code Playgroud)
我想我可能在路线上遗漏了一些东西,但我不确定.
我在我的网站上使用Bootstrap模式对话框(在桌面上工作正常).当我尝试在iPhone和iPad上使用此功能时,模态不起作用.
是否有一个原因?有没有人在使用Bootstrap的CSS时提出修复方法@import?
我使用Bootstrap覆盖文件来更改Bootstrap CSS.
我一直试图修改twitter bootstrap导航栏,此刻所有链接都对齐到左边,当我真正想要的是将它们放在中心位置时.
在另一篇文章中我读到你使用它
.tabs, .pills {
margin: 0 auto;
padding: 0;
width: 100px;
}
Run Code Online (Sandbox Code Playgroud)
但这对我不起作用
我需要在css中更改以实现此目的,我理解我将修改后的CSS放在引导程序中并覆盖.
任何帮助赞赏
这是我的标记
布局/应用
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand">Newbridges</a>
<% if user_signed_in? %>
<div class="nav-collapse">
<ul class="nav ">
<%= render "shared/navbarlogin" %>
</div>
<% else%>
<div class="nav-collapse">
<ul class="nav">
<%= render "shared/navbar" %>
</div>
<% end %>
Run Code Online (Sandbox Code Playgroud)
我也试过这个
.nav > li {
float: none;
display: inline-block;
*display: inline;
/* …Run Code Online (Sandbox Code Playgroud) I am using Slick for a carousel implementation and everything works fine when the pages loads.What I am trying to achieve is that when i make an Ajax call to retrieve new data I still want the slick carousel implementation, at the moment i lose it.
I have put the call for slick into a function
function slickCarousel() {
$('.skills_section').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
}
Run Code Online (Sandbox Code Playgroud)
and then I call the function within my success callback
$.ajax({
type: …Run Code Online (Sandbox Code Playgroud) 我一直在使用bootstrap几个月,我希望澄清一些事情作为最佳实践的一部分.
我的问题是我是为每一行创建一个容器,还是为整个页面创建一个大容器.
例1(封闭容器)
<div class="container">
<div class="row">
<div class="span8 offest2">
<h1>Content</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span8 offest2">
<h1>More Content</h1>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
例2(1个大容器)
<div class="container">
<div class="row">
<div class="span8 offest2">
<h1>Content</h1>
</div>
</div>
<div class="row">
<div class="span8 offest2">
<h1>Content</h1>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
任何帮助表示赞赏,只是不想早点养成坏习惯
我正在使用Google Maps API,并希望能够在移动设备上滚动浏览地图,而不是在使用滚轮向下滚动网页时缩放地图.
这是我的代码:
var mapOptions = {
center: new google.maps.LatLng(51.605139, -2.918567),
zoom: 15,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Run Code Online (Sandbox Code Playgroud)
这很好,但我想要实现的是仅在单击地图时启用滚轮缩放.
(所以在网页上,当我点击地图,我可以放大它或移动设备时,当我点击屏幕时,我可以捏合并缩放/拖动地图.)
我是否可以添加事件监听器以仅在双击或单击时激活可拖动?
是否可以使用API?
编辑
我尝试了以下代码,但它似乎不起作用:
google.maps.event.addListener(map, 'click', function (event) {
var mapOptions = {
draggable: true,
};
});
Run Code Online (Sandbox Code Playgroud) 我有一个sinatra应用程序,其中我有一个yml文件来设置环境变量,我用这个方法调用它们
module MyConfig
def config
environment = ENV["RACK_ENV"] || "development"
YAML.load_file("./config/config.yml")[environment]
end
end
Run Code Online (Sandbox Code Playgroud)
因此,当我想使用变量时,我会这样做
aws_access_key_id = config['aws_access_key']
Run Code Online (Sandbox Code Playgroud)
我有一个.gitignore文件,当推送到github时忽略了config.yml.例如,当我推送到heroku时,这些环境变量将无法访问?
所以这让我使用heroku方式设置它们就像这样
heroku config:add aws_access_key= myapikey
Run Code Online (Sandbox Code Playgroud)
但是heroku访问这些就像
aws_access_key_id = ENV['aws_access_key']
Run Code Online (Sandbox Code Playgroud)
如何设置我的开发环境以使用方法配置和heroku使用ENV,我是否以错误的方式看待这个?或者我的配置方法是否为我这样做?
任何帮助赞赏
Rake文件
require 'active_support/core_ext'
require './config/config.rb'
require 'bundler/setup'
Bundler.require(:default)
include MyConfig
AssetSync.configure do |con|
con.fog_provider = 'AWS'
con.fog_region = 'eu-west-1'
con.fog_directory = config['fog_directory']
con.aws_access_key_id = config['aws_access_key']
con.aws_secret_access_key = config['aws_secret_key']
con.prefix = "assets"
con.public_path = Pathname("./public")
end
namespace :assets do
desc "Precompile assets"
task :precompile do
AssetSync.sync
end
end
Run Code Online (Sandbox Code Playgroud) 我试图在成功的ajax调用后重新初始化owl carousel.ajax调用将更改数据,但视图应保持不变.我遇到的问题是视图(轮播结构)不会重新初始化.页面加载时一切正常.
即时通讯使用1.3.3版
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
items : 3
});
});
Run Code Online (Sandbox Code Playgroud)
Ajax调用
$.ajax({
type: 'get',
url: '/public/index',
dataType: 'script',
data: data_send,
success: function(data) {
$(".owl-carousel").owlCarousel({
items: 3
});
}
});
}
Run Code Online (Sandbox Code Playgroud)
我错过了我需要做的事情.我在github页面上看过这个问题并尝试了这些建议,但无济于事.
任何帮助赞赏
编辑
根据给出的建议,我创造了这两个功能
function owlCarousel() {
var owl = $(".owl-carousel");
//init carousel
owl.owlCarousel();
owl.data('owlCarousel').reinit({
items : 3
});
}
function destroyOwlCarousel() {
var owl = $(".owl-carousel");
//init carousel
owl.owlCarousel();
owl.data('owlCarousel').destroy();
}
}
Run Code Online (Sandbox Code Playgroud)
它似乎工作,但想知道这是否是这样做的正确方法?
css ×4
javascript ×3
ajax ×2
jquery ×2
containers ×1
css3 ×1
dom-events ×1
foreman ×1
gitignore ×1
google-maps ×1
heroku ×1
html ×1
owl-carousel ×1
sinatra ×1
slick.js ×1