Javascript 自定义现有twitter引导模式样式_Javascript_Html_Css

Javascript 自定义现有twitter引导模式样式

javascript html css

Javascript 自定义现有twitter引导模式样式,javascript,html,css,Javascript,Html,Css,所以我对CSS还很陌生。我知道有一些继承，但除了字体，我并不总是确定它适用于哪里。所以我要做的是修改twitter引导模式类。有一个主干视图当前与这些类一起显示： modal hide fade 我想做的是扩展模态视图的宽度和高度，但要保持所有其他模态CSS属性的灵活性。有办法做到这一点吗？在我自己项目的local.less文件中，我首先尝试了我在谷歌上搜索到的东西但我的观点不再是模态。它没有居中，背景也没有变暗。因此，我认为我可以将.modal类从twitter引导复制到本地的.less文

所以我对CSS还很陌生。我知道有一些继承，但除了字体，我并不总是确定它适用于哪里。所以我要做的是修改twitter引导模式类。有一个主干视图当前与这些类一起显示：

modal hide fade

我想做的是扩展模态视图的宽度和高度，但要保持所有其他模态CSS属性的灵活性。有办法做到这一点吗？在我自己项目的local.less文件中，我首先尝试了我在谷歌上搜索到的东西

但我的观点不再是模态。它没有居中，背景也没有变暗。因此，我认为我可以将.modal类从twitter引导复制到本地的.less文件中，然后更改宽度/高度。所以我试着用这个：

.modal-width-half (@modalWidth: 50%) {
  top: 50%;
  left: 50%;
  z-index: 1050;
  overflow: auto;
  width: @modalWidth;
  margin: -250px 0 0 -@modalWidth / 2;
  background-color: white;
  border: 1px solid #999999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
}

再说一次，这种风格不是模态的。是否有我遗漏或做得不正确的地方？谢谢。

我刚刚做了这件事，可以分享你错过的那一行

在我提交更改模式宽度的过程中，我必须更改

width

属性以及。通过更改这两个选项，可以保持窗体居中

.modal {
  width: @modalWidth;
  margin-left: -@modalWidth / 2;
}

当然，这将适用于您站点上的所有模态，如果您只想将其应用于一个模态，那么您可以自定义类名，例如

.my-modal { 
  width: @modalWidth; 
  margin-left: -@modalWidth / 2; 
}

然后，您可以在html中引用它，如：

<div class="modal fade open my-modal">...</div>

。。。

只需确保

.my modal

的定义位于less/css文件中的

.modal

之后，否则该定义将被引导样式覆盖。

我刚刚完成了此操作，可以共享您缺少的行