小编Vin*_*hua的帖子

在Bootstrap 4中用d-flex替换col

由于新的Bootstrap 4正在从使用" 浮动 "元素迁移到更好的" flexbox "方法,只是想知道使用.d-flex而不是现有.container .row .col方法构建整个网格结构是否可行

由于它们都是使用flexbox从根本上构建的,所以我看不出任何替换它们的缺点.事实上,我觉得.d-flex需要更少的css类名,并使html中的内容更具可读性.

我还有其他原因d-flex比旧的更好col:

  1. 水平和垂直元素 - d-flex支持水平(.flex-row)和垂直(.flex-column)创建元素.Col仅支持水平.

  2. 内联元素 - 元素的宽度将继承自子元素,并且可以使用d-inline-flex动态对齐.col网格是固定的.

  3. 提前重新订购 - d-flex使用.order-x和col使用.push.pull.在我看来,d-flex更直观的是,元素的顺序通过编号来表示,另一方面,数字的数量.col是从前一个状态推动和拉开的网格数量.当你构建一个更复杂的网站时,它会变得混乱....

如果我错了,请纠正我.

html css css3 flexbox twitter-bootstrap

12
推荐指数
1
解决办法
7863
查看次数

在JavaScript中将数组合并为单个对象

目前我有3个阵列:

var idArray = [13, 24, 35];    
var dateArray = [20181920, 20181120, 20172505];
var contentArray = ["content1", "content2", "content3"];
Run Code Online (Sandbox Code Playgroud)

我想将所有数组合并为一个对象而我尝试使用for循环但是却出现了错误:

var finalObj = {};

for (var y = 0; y < dateArray.length; y++) { 
    finalObj[y].id = idArray[y];
    finalObj[y].date =  dateArrayArrange[y];
    finalObj[y].content =  contentArray[y];

}
Run Code Online (Sandbox Code Playgroud)

我想达到的最终结果:

finalObj = [{id:13, date:20181920, content:"content1"},
          {id:24, date:20181120, content:"content2"},
          {id:35, date:20172505, content:"content3"}];
Run Code Online (Sandbox Code Playgroud)

javascript arrays object

5
推荐指数
2
解决办法
126
查看次数

防止滚动更改哈希值

对不起下面丑陋的布局示例... http://www.wthdesign.net/test/test2.html

我设法将我的id名称附加到网址:

function generateUrl(el)
{
    var currentId = $(el).attr('id');
    document.location.hash = currentId;
}
Run Code Online (Sandbox Code Playgroud)

并添加:

<a id="abc2" onClick="generateUrl(this)" >this is an anchor btn</a>
Run Code Online (Sandbox Code Playgroud)

但最终会产生与以下相同的效果:

<a id="abc2" href="#abc2" >this is an anchor btn</a>
Run Code Online (Sandbox Code Playgroud)

一切都很好,但我只是不想在我点击链接时滚动我应该怎么做?提前谢谢了.

javascript anchor scroll hyperlink

2
推荐指数
1
解决办法
7323
查看次数

我应该在javascript中使用“ this”还是“ event.target”?

我在下面创建了一个简单的div演示,单击一次将不显示任何一个。

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">

function toggle2(e) {

    var textx = (e.target) ? e.target : e.srcElement;
    textx.style.display = "none";

    console.log(e.target);
} 
Run Code Online (Sandbox Code Playgroud)

我的问题是,如果我更换,有什么区别

<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">
Run Code Online (Sandbox Code Playgroud)

<div id="three" onclick="toggle2(this);return false;" style="background:#303; color:#FFF;">
Run Code Online (Sandbox Code Playgroud)

两者对于我上面的示例都可以正常工作.....

javascript events this target

2
推荐指数
1
解决办法
4585
查看次数

将CSS存储在PHP变量中?

我是一个新手php学习者,我正在试验如何动态链接不同的php文件.在试验时,我意识到我可以在我的php文件中创建变量并使我的模板文件回应我需要的html,而无需编辑我的模板文件......

例如:在about-me.php页面中,我使用了header.php和footer.php

 <?php include ('includes/header.html'); ?>
 <?php include ('includes/footer.html'); ?>
Run Code Online (Sandbox Code Playgroud)

然后我创建一个变量

  $page_title = 'CompanyABC';
Run Code Online (Sandbox Code Playgroud)

并在header.php中回显

  $page_title = 'South Asia Exact'; 
Run Code Online (Sandbox Code Playgroud)

现在我的问题是我可以对我的内联css这样做吗?例如,我创建了一个变量,它存储了我的所有内联css:

 $page_inlinecss = "#SAEcontentR div#certification_certificate {
    margin:0 auto 0 auto;
    width:580px; 
    height:464px;
     }\n";
Run Code Online (Sandbox Code Playgroud)

然后我在我的header.php中回声如下:

<style type="text/css">
<?php echo $page_inlinecss; ?>
</style>
Run Code Online (Sandbox Code Playgroud)

我尝试了它并且它有效,但我想知道这是正确的方法吗?

css php dynamic

2
推荐指数
1
解决办法
2968
查看次数

Javascript/Jquery 在浏览器宽度改变时运行功能?

我正在创建一个移动网站,但现在客户坚持使用无响应的原始网站。这意味着我将在同一个域下拥有两个网站。

现在我需要做的是在加载网页时比较用户屏幕大小并将它们重定向到正确的网站。

我可以使用下面的 javascript 解决这个问题:

  if($(window).width() <= 760){ 
    document.location = "https://maps.google.com.my/";
    alert('mobile ver');//goto mobile version
  }
Run Code Online (Sandbox Code Playgroud)

但还有一个问题,如果这个人正在使用

1.小屏幕(电脑屏幕)一开始然后决定最大化浏览器屏幕?

或者

  1. 从纵向视图切换到横向视图,(具有更长的宽度...)

有没有可以在每次浏览器宽度改变时触发的功能?

javascript jquery function width

1
推荐指数
1
解决办法
3330
查看次数

收集所有数据属性?

我的网页是动态生成的,数据 - 跑道 - 链接,数据 - 视频 - 链接,数据 - 后台 - 链接,将来会有更多......

模式总是像这个data-xxx-link,我想要做的是,提取每个中的"xxx"文本将它们存储在一个数组中,以便我可以使用javascript引用每个信息

 <li> <a data-season="Designer Profiles" data--link="123" data-video-link="1233"> </a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> 3.1 Phillip Lim</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> Acne Studios</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> Aigner</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Backstage-link="abc" data-video-link="abc"> Alexander McQueen</a></li>
 <li> <a data-season="Spring/Summer 2014" data-Runway-link="abc" data-video-link="abc"> Alexander Wang</a></li>
Run Code Online (Sandbox Code Playgroud)

javascript arrays jquery attributes

1
推荐指数
1
解决办法
299
查看次数

逐个标记不起作用?

这是一个非常简单的问题,为什么在javascript中按标记获取元素不能像id一样获取元素?

这是我的代码示例:

http://codepen.io/vincentccw/pen/KvAfF

HTML

<ul>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
</ul>
Run Code Online (Sandbox Code Playgroud)

JavaScript的

document.getElementsByTagName("li").style.color="red";
Run Code Online (Sandbox Code Playgroud)

javascript css

1
推荐指数
1
解决办法
1544
查看次数

JavaScript是否使用if条件运行一次?

我想做的是只运行一次if语句并禁用该语句。在我的代码中,如果我连续单击按钮,则if语句仍会呈现。这是为什么?

HTML:

<button onclick="appendMsg()">submit</button>
<div id="wrapper"></div>
Run Code Online (Sandbox Code Playgroud)

Javascript:

function appendMsg(){

  var triggerOnceforShare = true;

  if(triggerOnceforShare){
     triggerOnceforShare = false;
    document.getElementById('wrapper').innerHTML+=triggerOnceforShare + "<br />"
    console.log(triggerOnceforShare);
  }

}
Run Code Online (Sandbox Code Playgroud)

codepen:http://codepen.io/vincentccw/pen/uoBkI

javascript if-statement conditional-statements

1
推荐指数
1
解决办法
7211
查看次数

添加类时,'div'和'<div />'之间的jQuery区别?

我正在分析一个插件,但我意识到作者使用:

$('<div/>').addClass('sample-piece');
Run Code Online (Sandbox Code Playgroud)

而不是以下

$('div').addClass('sample-piece');
Run Code Online (Sandbox Code Playgroud)

是什么意思<div/>,<a/>......它似乎不是一个有效的HTML标签.

我似乎无法找到任何解决方案,因为谷歌不允许我在线搜索运营商.....

html tags jquery refer

0
推荐指数
1
解决办法
1336
查看次数

使用CSS内联JavaScript

我想使用内联JavaScript来扭曲列表标记.

这是li它调用的标记和方法:

<li onPageload=
             "myFunction( element.style.webkitTransform = "skew(-25deg)"; ">
</li>
Run Code Online (Sandbox Code Playgroud)

但是,它不起作用.我哪里做错了?

html javascript css

0
推荐指数
1
解决办法
131
查看次数

在value属性中写变量?

我在将数组值打印到我的值属性时遇到困难:

下面是我的代码:

$(".select").append("<option value="+ optionValues[i] +">"+ revList[i].innerHTML +"</option>");
Run Code Online (Sandbox Code Playgroud)

我的optionValues数组由空格组成,例如:

[2014年秋冬季,2014年冬季时装..........]

但是当我渲染出我的元素时,我得到了这个:

<option value="Spring" summer="" 2014="">Spring/Summer 2014</option>
Run Code Online (Sandbox Code Playgroud)

我如何格式化为这样的东西?

<option value="Spring summer 2014">Spring/Summer 2014</option>
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery

-1
推荐指数
1
解决办法
53
查看次数