6

我使用 twitter bootstrap 设计了一个包含一些内容的 div。现在我想生成这个页面的一个片段，以便其他用户可以在他们的页面中复制粘贴这个片段。但问题是，不能保证所有这些都使用引导程序，所以这个片段在非引导程序站点中不起作用。

我也添加了一些自定义 css 类。我可以使用样式标签将这些样式添加到代码片段中。如果我想以同样的方式添加引导样式，那将是巨大的。

是否可以为该特定 div 使用引导 CDN？这样引导样式就不会影响该页面的其他部分。或者还有其他方法吗？

这是片段：

<div id="login-form">
    <div class="row row-padded">
        <div class="col-md-7">
            <form role="form">
                <div id="title" class="section-header login-form-label">Login</div>
                <div class="form-group">
                    <label for="exampleInputEmail1" class="login-form-label">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1" class="login-form-label">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>

                <button type="button" class="btn btn-primary" id="primary-button-text">Primary</button>

                <div><a href="#" class="">Forgot password?</a></div>
                <div><a href="#" class="" id="register-link-text">New here? Create an Account</a></div>

            </form>
        </div>
    </div>
4

2 回答 2

3

我不认为您可以使用 CDN 执行此操作，因为您不能仅在 div 上应用样式（尝试 iframe？）。

您可以做的是尝试编译所需的最低 css 并将其应用于您的 div。

从 Github 下载最新版本的 Bootstrap。

将您将使用的每个引导程序类复制到 Less 中的 #login-form 子类，例如：

#login-form .row {.row;}

将此行添加到 bootstrap.less 的末尾并编译此文件，复制生成的 CSS 的最新行#login-form

对于您的示例，我使用：

#login-form .row {.row;}
#login-form .col-md-7 {.col-md-7;
    float: left;
    width: percentage((7 / @grid-columns)); 
}
#login-form .form-group {.form-group}
#login-form .btn {.btn;}
#login-form .btn-primary {.btn-primary;}
#login-form .form-control {.form-control;}

这将导致：

#login-form .row:after{clear:both}
#login-form .row:before,#login-form .row:after{content:" ";display:table;}
#login-form .row:after{clear:both}
#login-form .col-md-7{position:relative;min-height:1px;padding-left:15px;padding-right:15px;float:left;width:58.333333333333336%}
#login-form .form-group{margin-bottom:15px}
#login-form .btn{display:inline-block;margin-bottom:0;font-weight:normal;text-align:center;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;padding:6px 12px;font-size:14px;line-height:1.428571429;border-radius:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}#login-form .btn:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}
#login-form .btn:hover,#login-form .btn:focus{color:#333;text-decoration:none}
#login-form .btn:active,#login-form .btn.active{outline:0;background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,0.125);box-shadow:inset 0 3px 5px rgba(0,0,0,0.125)}
#login-form .btn.disabled,#login-form .btn[disabled],fieldset[disabled] #login-form .btn{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}
#login-form .btn-primary{color:#fff;background-color:#428bca;border-color:#357ebd}#login-form .btn-primary:hover,#login-form .btn-primary:focus,#login-form .btn-primary:active,#login-form .btn-primary.active,.open .dropdown-toggle#login-form .btn-primary{color:#fff;background-color:#3276b1;border-color:#285e8e}
#login-form .btn-primary:active,#login-form .btn-primary.active,.open .dropdown-toggle#login-form .btn-primary{background-image:none}
#login-form .btn-primary.disabled,#login-form .btn-primary[disabled],fieldset[disabled] #login-form .btn-primary,#login-form .btn-primary.disabled:hover,#login-form .btn-primary[disabled]:hover,fieldset[disabled] #login-form .btn-primary:hover,#login-form .btn-primary.disabled:focus,#login-form .btn-primary[disabled]:focus,fieldset[disabled] #login-form .btn-primary:focus,#login-form .btn-primary.disabled:active,#login-form .btn-primary[disabled]:active,fieldset[disabled] #login-form .btn-primary:active,#login-form .btn-primary.disabled.active,#login-form .btn-primary[disabled].active,fieldset[disabled] #login-form .btn-primary.active{background-color:#428bca;border-color:#357ebd}
#login-form .form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429;color:#555;vertical-align:middle;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s}#login-form .form-control:-moz-placeholder{color:#999}
#login-form .form-control::-moz-placeholder{color:#999}
#login-form .form-control:-ms-input-placeholder{color:#999}
#login-form .form-control::-webkit-input-placeholder{color:#999}
#login-form .form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6)}
#login-form .form-control[disabled],#login-form .form-control[readonly],fieldset[disabled] #login-form .form-control{cursor:not-allowed;background-color:#eee}
textarea#login-form .form-control{height:auto}

用你的代码查看这个：http: //jsfiddle.net/gDraJ/

请注意，媒体查询中包含了一些较少的规则（我不知道如何复制它们）。所以在这个例子中我使用：

#login-form .col-md-7 {.col-md-7;
    float: left;
    width: percentage((7 / @grid-columns)); 
}

其中#login-form .col-md-7 {.col-md-7;} 应该是预期的。

在小提琴示例中，我还添加：

#login-form
{
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
      box-sizing: content-box;
}

请参阅：Twitter 的带有 ShareThis 小部件的 Bootstrap 3以及为什么 Bootstrap 3 切换到 box-sizing:border-box？

更新 理论上您也可以将 bootstrap.less 的所有内容包装在里面#login-form{}并编译它。生成的 CSS 将仅在 #login-form 上应用所有 Bootstrap 规则。当然，您可以在外部 url 上提供此 CSS。

于 2013-10-13T13:27:15.450 回答
1

我建议寻找替代解决方案，但可以这样做：

在客户端上使用 less ( http://lesscss.org/ )，并创建一个将使用 CDN 中的源 css 的 less 文件。

这当然没有那么好的性能，但会像你想要的那样动态地工作。

于 2013-11-07T22:09:36.383 回答