Html 是否可以使用CDN仅对div应用引导？

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

我还添加了一些自定义css类。我可以使用style标记在代码段中添加这些样式。如果我想以同样的方式添加引导风格，它将是巨大的

是否可以为特定的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>

登录
电子邮件地址
密码
主要的，重要的

我认为CDN无法做到这一点，因为您不能仅在div上应用样式（尝试iframe？）

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

从Github下载最新版本的引导

将要使用的每个引导类复制到#login form的子类中，不太像：

#登录表单.row{.row；}

将这些行添加到bootstrap.less的末尾，并编译这些文件，将结果CSS的最新行复制到

#登录表单

对于您的示例，我使用：

#登录表单.row{.row；}
#登录表格.col-md-7{.col-md-7；
浮动：左；
宽度：百分比（（7/@网格列））；
}
#登录表单.form组{.form组}
#登录表单.btn{.btn；}
#登录表单.btn primary{.btn primary；}
#登录表单.form控件{.form控件；}

这将导致：

#登录表单.row:after{clear:tweet}
#登录表单。行：前，#登录表单。行：后{内容：；显示：表；}
#登录表单。行：{clear:both}之后
#登录表单.col-md-7{位置：相对；最小高度：1px；左侧填充：15px；右侧填充：15px；浮动：左侧；宽度：58.3336%}
#登录表单.表单组{margin bottom:15px}
#登录表单.btn{显示：内联块；边距底部：0；字体重量：正常；文本对齐：中心；垂直对齐：中间；光标：指针；背景图像：无；边框：1px实心透明；空白：nowrap；填充：6px 12px；字体大小：14px；线条高度：1.428571429；边框半径：4px；-webkit用户选择：无；-moz用户选择：无；-ms用户选择：无；-o用户选择：无；用户选择：无-选择：无}#登录表单。btn:focus{轮廓：细点#333；轮廓：5px自动-webkit聚焦环颜色；轮廓偏移：-2px}
#登录表单.btn:hover，#登录表单.btn:focus{color:#333；文本装饰：none}
#login form.btn:active，#login form.btn.active{大纲：0；背景图像：无；-webkit框阴影：插入0 3px 5px rgba（0,0,0,0.125）；框阴影：插入0 3px 5px rgba（0,0,0,0.125）}
#login form.btn.disabled、#login form.btn[disabled]、fieldset[disabled]#login form.btn{光标：不允许；指针事件：无；不透明度：.65；过滤器：alpha（不透明度=65）；-webkit框影：无；框影：无}
#登录表单。btn主界面{颜色：#fff；背景颜色：#428bca；边框颜色：357ebd}登录表单。btn主界面：悬停，#登录表单。btn主界面：焦点，#登录表单。btn主界面：活动，#登录表单。btn主界面。活动，。打开。下拉切换#登录表单。btn主界面{颜色：#fff；背景颜色：#3276b1；边框颜色：358E}
#login form.btn primary:active，#login form.btn primary.active，.open.dropdown切换#login form.btn primary{背景图像：无}
#登录表单.btn primary.disabled，#login form.btn primary[disabled]，fieldset[disabled]#login form.btn primary.disabled:hover，#login form.btn primary[disabled]：hover，fieldset[disabled]#login form.btn primary.disabled:focus，#login form.btn primary[disabled]：focus，focus，fieldset[disabled]#登录表单。btn主：焦点，#登录表单。btn主。禁用：活动，#登录表单。btn主[禁用]：活动，字段集[禁用]#登录表单。btn主：活动，#登录表单。btn主。禁用。活动，#登录表单。btn主[禁用]。活动，字段集[禁用]#登录表单。btn主。活动{背景颜色：#428bca；边框颜色：357ebd}
#登录表单.表单控件{显示：块；宽度：100%；高度：34px；填充：6px 12px；字体大小：14px；行高：1.428571429；颜色：555；垂直对齐：中间；背景颜色：fff；背景图像：无；边框：1px实心#ccc；边框半径：4px；-webkit方框阴影：插入0 1px 1px rgba（0,0,0,0.075）；方框阴影：插入0 1px 1pRGBA（0,0,0,0,0.075）；-webkit转换：边框颜色输入输出.15s，方框阴影输入输出.15s；转换：边框颜色输入输出.15s，方框阴影输入输出.15s}登录表单.表单控件：-moz占位符{color:#999}
#登录表单。表单控件：：-moz占位符{color:#999}
#登录表单。表单控件：-ms输入占位符{颜色：#999}
#登录表单。表单控件：：-webkit输入占位符{color:#999}
#登录表单。表单控件：焦点{边框颜色：#66afe9；轮廓：0；-webkit框阴影：插入01px1pxRGBA（0,0,0,075），0.08pxRGBA（102,175,233,0.6）；框阴影：插入01px1pxRGBA（0,0,0,0,075），0.8pxRGBA（102,175,233,0.6）}
#登录表单.表单控件[禁用]，#登录表单.表单控件[只读]，字段集[禁用]#登录表单.表单控件{光标：不允许；背景色：#eee}
textarea#登录表单.表单控件{height:auto}

请参见以下代码：

注意：媒体查询中包含的规则较少（我不知道如何复制它们）。因此在本例中，我使用：

#登录表单.col-md-7{.col-md-7；
浮动：左；
宽度：百分比（（7/@网格列））；
}

其中应预期为#login form.col-md-7{.col-md-7；}

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

#登录表单
{
-webkit框大小：内容框；
-moz框大小：内容框；