使用Bootstrap的布局,如何在一个布局中完整的显示另外一个HTML文件_百度知道
使用Bootstrap的布局,如何在一个布局中完整的显示另外一个HTML文件
这是我的代码:
&div class=&container bs-docs-container&&
&div class=&row&&
&div class=&col-md-3&&
&div class=&bs-docs-sidebar hidden-print hidden-xs hidden-sm& role=&complementary&&
&ul class=&nav bs-docs-sidenav&&
我有更好的答案
div class=&quot、数据行(.row)必须包含在容器（;div&3、具体内容应当放置在列容器（column）之内;&/div&&&gt。1;div&&div class=&col-md-8&&&&#47、在行(;/div&gt，以便为其赋予合适的对齐方式和内距(padding).container）中.column);row&&&div class=&col-md-4&&&/&lt，但列数之和不能超过平分的总列数;div class=&quot，比如12。如：&div class=&container&quot。如.row)中可以添加列(;container&&&div class=&row&2;&lt：&ltBootstrap内置了一套响应式、移动设备
给iframe设置需要的高度即可。
右边div自己写，不要用BS的代码~
可以使用iframe实现
iframe设置固定的宽高。
请问下 设置成固定的宽高px，而不是采用百分比%的话，不就没法在分辨率不同的显示器上保持一样的效果了吗？
其可以用异步加载页面
其他3条回答
为您推荐：
其他类似问题
bootstrap的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。匿名用户不能发表回复！|bootstrap 模态框 modal 插件在一个含有多个页面_百度知道
bootstrap 模态框 modal 插件在一个含有多个页面
我有更好的答案
　模态框（Modal）是覆盖在父窗体上的子窗体，您可以通过简单的一行 JavaScript 来调用带有 id=&identifier& 的模态框：　　$('　　&开始演示模态框&&#47，您需要有某种触发器：　　通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=&modal&&close& data-dismiss=&modal&，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。　　class=&modal-body&，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。　　class=&modal-footer&，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。　　data-toggle=&modal&，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。　　选项　　有一些选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：　　选项名称类型/默认值Data 属性名称描述　　backdropboolean 或 string 'static'　　默认值：truedata-backdrop指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。　　keyboardboolean　　默认值：truedata-keyboard当按下 escape 键时关闭模态框，设置为 false 时则按键无效。　　showboolean　　默认值：truedata-show当初始化时显示模态框。　　remotepath　　默认值：falsedata-remote使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：　　&a data-toggle=&modal& href=&remote.html& data-target=&#modal&&请点击我&/a&　　方法　　下面是一些可与 modal() 一起使用的有用的方法。　　方法描述实例　　Options: .modal(options)把内容作为模态框激活。接受一个可选的选项对象。　　$('#identifier').modal({　　keyboard: false　　})　　Toggle: .modal('toggle')手动切换模态框。　　$('#identifier').modal('toggle')　　Show: .modal('show')手动打开模态框。　　$('#identifier').modal('show')　　Hide: .modal('hide')手动隐藏模态框。　　$('#identifier').modal('hide')　　实例　　下面的实例演示了方法的用法：　　实例　　&!-- 模态框（Modal） --&　　&div class=&modal fade& id=&myModal& tabindex=&-1& role=&dialog& aria-labelledby=&myModalLabel& aria-hidden=&true&&　　&div class=&modal-dialog&&　　&div class=&modal-content&&　　&div class=&modal-header&&　　&button type=&button& class=&close& data-dismiss=&modal& aria-hidden=&true&&×&/button&　　&h4 class=&modal-title& id=&myModalLabel&&模态框（Modal）标题&/h4&　　&/div&　　&div class=&modal-body&&按下 ESC 按钮退出。&/div&　　&div class=&modal-footer&&　　&button type=&button& class=&btn btn-default& data-dismiss=&modal&&关闭&/button&　　&button type=&button& class=&btn btn-primary&&提交更改&/button&　　&/div&　　&/div&&!-- /.modal-content --&　　&/div&&!-- /.modal-dialog --&　　&/div&　　&!-- /.modal --&　　&script&　　$(function() {　　$('#myModal').modal({　　keyboard: true　　})　　});　　&/script&　　尝试一下 ?0?3　　结果如下所示：　　模态框（Modal）插件方法　　只需要点击 ESC 键，模态窗口即会退出。　　事件　　下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。　　事件描述实例　　show.bs.modal在调用 show 方法后触发。　　$('#identifier').on('show.bs.modal', function () {　　// 执行一些动作...　　})　　shown.bs.modal当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。　　$('#identifier').on('shown.bs.modal', function () {　　// 执行一些动作...　　})　　hide.bs.modal当调用 hide 实例方法时触发。　　$('#identifier').on('hide.bs.modal', function () {　　// 执行一些动作...　　})　　hidden.bs.modal当模态框完全对用户隐藏时触发。　　$('#identifier').on('hidden.bs.modal', function () {　　// 执行一些动作...　　})　　实例　　下面的实例演示了事件的用法：　　实例　　&!-- 模态框（Modal） --&　　&h2&模态框（Modal）插件事件&/h2&　　&!-- 按钮触发模态框 --&　　&button class=&btn btn-primary btn-lg& data-toggle=&modal& data-target=&#myModal&&开始演示模态框&/button&　　&!-- 模态框（Modal） --&　　&div class=&modal fade& id=&myModal& tabindex=&-1& role=&dialog& aria-labelledby=&myModalLabel& aria-hidden=&true&&　　&div class=&modal-dialog&&　　&div class=&modal-content&&　　&div class=&modal-header&&　　&button type=&button& class=&close& data-dismiss=&modal& aria-hidden=&true&&×&/button&　　&h4 class=&modal-title& id=&myModalLabel&&模态框（Modal）标题&/h4&　　&/div&　　&div class=&modal-body&&点击关闭按钮检查事件功能。&/div&　　&div class=&modal-footer&&　　&button type=&button& class=&btn btn-default& data-dismiss=&modal&&关闭&/button&　　&button type=&button& class=&btn btn-primary&&提交更改&/button&　　&/div&　　&/div&&!-- /.modal-content --&　　&/div&&!-- /.modal-dialog --&　　&/div&　　&!-- /.modal --&　　&script&　　$(function() {　　$('#myModal').modal('hide')　　})});　　&/script&　　&script&　　$(function() {　　$('#myModal').on('hide.bs.modal',　　function() {　　alert('嘿，我听说您喜欢模态框...');　　})　　});　　&/script&;btn btn-default& data-dismiss=&modal& 是您想要在页面上加载的模态框的目标。您可以在页面上创建多个模态框?3　　结果如下所示;在这里添加一些文本&/modal-body&true&quot，很明显;).modal-content --&gt.　　&myModalLabel& aria-labelledby=&myModalLabel& aria-hidden=&!-- /; role=&#identifier'div class=&quot。　　如果您仔细查看上面的代码，您会发现在 &button& 标签中;/button&　　&button type=&button& class=&　　&#myModal&modal-title& id=&myModalLabel&&模态框（Modal）标题&/，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式;& 来指定要切换的特定的模态框（带有 id=&identifier&）。　　通过 JavaScript：使用这种技术; aria-hidden=&true&&&times，modal-header 是为模态窗口的头部定义样式的类。　　class=&close&　　&/button&　　&h4 class=&quot，如下面的实例所示：　　实例　　&h2&创建模态框（Modal）&&#47，然后为每个模态框创建不同的触发器。现在.js。　　用法　　您可以切换模态框（Modal）插件的隐藏内容; 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。　　&div class=&modal-header&&;　　&button class=&btn btn-primary btn-lg& data-toggle=&quot：　　模态框（Modal）插件　　代码讲解：　　使用模态窗口;　　&!-- /;，同时设置 data-target=&quot.js。或者; tabindex=&quot。　　data-dismiss=&modal&&btn btn-primary&&提交更改&/&modal& data-target=&关闭&/div&true&　　&lt，那么您需要引用&!-- 模态框（Modal） --&　　&div class=&modal fade& id=&myModal&h2&gt.dialog&　　&/div&gt。　　aria-labelledby=&quot。　　第二是 .fade class，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap，您不能在同一时间加载多个模块，但您可以在页面上创建多个在不同时间进行加载。　　在模态框中需要注意两点：　　第一是 ;modal-dialog&　　&　　&div class=&/div&h4&gt.modal(options)　　实例　　一个静态的模态窗口实例;，该属性引用模态框的标题。　　属性 aria-hidden=&#identifier& 或 href=&#identifier&　　&div& 的内容识别为模态框;-1&modal-content&&　　&div class=&modal-header&&　　&button type=&button& class=&div class=&quot.modal --&gt。　　如果您想要单独引用该插件的功能，data-target=&　　尝试一下 ;/div&gt。当模态框被切换时，它会引起内容淡入淡出。您可以使用按钮或链接。这里我们使用的是按钮，用来把 &/div&&div&　　&div class=&modal-footer&&　　&button type=&button& class=&!-- 按钮触发模态框 --&button&gt?0;&lt，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息;&button&gt、交互等;#myModal&quot。通常，目的是显示来自一个单独的源的内容
采纳率：92%
来自团队：
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。我们都知道使用bootstrap做轮播效果非常快，但是有时候一个页面会需要两个轮播；但这个时候再次使用bootstrap做轮播效果时就会失效；原因在于bootstrap的Carousel问题，只要修改一下id，就好了~~
这是第一个轮播：（未做修改）
&div id="myCarousel" class="carousel slide"&
&!-- 轮播（Carousel）指标 --&
&ol class="carousel-indicators"&
&li data-target="#myCarousel" data-slide-to="0" class="active"&&/li&
&li data-target="#myCarousel" data-slide-to="1"&&/li&
&li data-target="#myCarousel" data-slide-to="2"&&/li&
&li data-target="#myCarousel" data-slide-to="3"&&/li&
&!-- 轮播（Carousel）项目 --&
&div class="carousel-inner"&
&div class="item active"&
&img src="./zt-img/lb1.jpg" alt="First slide" height="400px" width="100%"&
&div class="item"&
&img src="./zt-img/lb3.jpg" alt="Third slide"
width="100%"&
&div class="item"&
&img src="./zt-img/lb4.jpg" alt="Second slide" width="100%"&
&div class="item"&
&img src="./zt-img/lb5.jpg" alt="Third slide"
width="100%"&
&!-- 轮播（Carousel）导航 --&
&a class="carousel-control left" href="#myCarousel"
data-slide="prev"&&/a&
&a class="carousel-control right" href="#myCarousel"
data-slide="next"&&/a&
&!--id="myCarousel"--&
　　这是第二个轮播：（已修改）
1. 修改轮播动画的id属性
id="myCarousel"改为 id="myCarousela"
2. 修改ol li 内的data-target属性为你修改后的id
全部的data-target="#myCarousel" 改为 data-target="#myCarousela"
3. 修改a标签的href属性为#修改后的id
全部的href="#myCarousel"改为href="#myCarousela"
&div id="myCarousela" class="carousel slide"&
&!-- 轮播（Carousel）指标 --&
&ol class="carousel-indicators"&
&li data-target="#myCarousela" data-slide-to="0" class="active"&&/li&
&li data-target="#myCarousela" data-slide-to="1"&&/li&
&li data-target="#myCarousela" data-slide-to="2"&&/li&
&li data-target="#myCarousela" data-slide-to="3"&&/li&
&!-- 轮播（Carousel）项目 --&
&div class="carousel-inner"&
&div class="item active"&
&img src="./zt-img/lb1.jpg" alt="First slide" height="400px" width="100%"&
&div class="item"&
&img src="./zt-img/lb3.jpg" alt="Third slide"
width="100%"&
&div class="item"&
&img src="./zt-img/lb4.jpg" alt="Second slide" width="100%"&
&div class="item"&
&img src="./zt-img/lb5.jpg" alt="Third slide"
width="100%"&
&!-- 轮播（Carousel）导航 --&
&a class="carousel-control left" href="#myCarousela"
data-slide="prev"&&/a&
&a class="carousel-control right" href="#myCarousela"
data-slide="next"&&/a&
&!--id="myCarousel"--&
阅读(...) 评论()