html – 是否可以使用CDN仅为div应用bootstrap？

概述我使用twitter bootstrap设计了一个包含一些内容的div.现在,我想生成此页面的片段,以便其他用户可以将此代码段复制粘贴到其页面中.但问题是,并不能保证所有这些都会使用bootstrap,所以这个代码片段在非引导站点中不起作用. 我也添加了一些自定义css类.我可以使用样式标记将这些样式添加到代码段中.如果我想以相同的方式添加bootstrap样式,那将是巨大的. 可以使用boots 我使用twitter bootstrap设计了一个包含一些内容的div.现在,我想生成此页面的片段,以便其他用户可以将此代码段复制粘贴到其页面中.但问题是,并不能保证所有这些都会使用bootstrap,所以这个代码片段在非引导站点中不起作用.

我也添加了一些自定义CSS类.我可以使用样式标记将这些样式添加到代码段中.如果我想以相同的方式添加bootstrap样式,那将是巨大的.

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

这是片段：

<div ID="login-form">    <div >        <div >            <form role="form">                <div ID="Title" >Login</div>                <div >                    <label for="exampleinputEmail1" >Email address</label>                    <input type="email"  ID="exampleinputEmail1" placeholder="Enter email">                </div>                <div >                    <label for="exampleinputPassword1" >Password</label>                    <input type="password"  ID="exampleinputPassword1" placeholder="Password">                </div>                <button type="button"  ID="primary-button-text">Primary</button>                <div><a href="#" >Forgot password?</a></div>                <div><a href="#"  ID="register-link-text">New here? Create an Account</a></div>            </form>        </div>    </div>

解决方法 我不认为你可以用CDN做到这一点,因为你不能只在div上应用样式(试试iframe？).

你可以做的是尝试编译所需的最小CSS并将其应用于你的div.

从Github下载最新版本的bootstrap.

将要使用的每个引导类复制到#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.125);Box-shadow:inset 0 3px 5px rgba(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,.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.075);Box-shadow:inset 0 1px 1px rgba(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,.075),0 0 8px rgba(102,175,233,0.6);Box-shadow:inset 0 1px 1px rgba(0,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’s Bootstrap 3 with ShareThis widget和Why did Bootstrap 3 switch to box-sizing: border-box?

更新从理论上讲,你也可以在#login-form {}中包装bootstrap.less的所有内容并编译它.生成的CSS将仅在#login-form上应用所有bootstrap规则.当然你可以在外部网址上提供这个CSS.

总结

以上是内存溢出为你收集整理的html – 是否可以使用CDN仅为div应用bootstrap？全部内容，希望文章能够帮你解决html – 是否可以使用CDN仅为div应用bootstrap？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。