-
bootstrap中的“模态弹出框”有以下几个特点： 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。 3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。查看全部
-
导入jquery库和javascript插件 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>查看全部
-
我要添加多个panel 代码怎么写呢？是要添加js 。还是bootstrap本身就有代码？查看全部
-
dropdowm()也不能正常弹出收起 $(function(){ $(".dropdown-toggle").dropdown("toggle"); }) 不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。查看全部
-
声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种： data-ride 属性：取值 carousel，并且将其定义在 carousel 上。 data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。 data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。 data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to="2"，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。 在这里需要注意可以为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。查看全部
-
第三步：设计轮播图片播放区。这个区域主要用来放置需要轮播的图片。使用 carousel-inner 样式来控制，而且其同样放置在 carousel 容器内，并且通过 item 容器来放置每张轮播的图片.其主要通过 carousel-inner 来控制其样式呈现。 上面显示的图片区只实现了图片播放，但很多轮播图片效果，在每个图片上还对应有自己的标题和描述内容。其实 Bootstrap 框架中的 Carousel 也提供类似的效果。只需要在 item 中图片底部添加对应的代码： <div class="carousel-inner"> <div class="item active"> <a href="##"><img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt=""></a> <!-- 图片对应标题和描述内容 --> <div class="carousel-caption"> <h3>图片标题</h3> <p>描述内容...</p> </div>查看全部
-
一个轮播图片主要包括三个部分： ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 复杂一点的轮播图片，每个轮播区会带有对应的标题和描述内容。 第一步：设计轮播图片的容器。在 Bootstrap 框架中采用 carousel 样式，并且给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。 <div id="slidershow" class="carousel"></div> 第二步：设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器，采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li)，一般采用有序列表来制作： <div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ...查看全部
-
第五步，激活手风琴交互行为。要完成交互行为，需要在标题链接中自定义两个属性，一个是data-toggle，并且取值为collapse；另一个是data-target，取值为各个面板内容区的标识符，比如说ID，在这个例子分别是#panel1、#panel2和#panel3. 注意：在这个案例中不加入data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如是button按钮作为触发器就必须使用data-target="#panel1"语句了。 第六步，定义data-parent属性，实现点击一个其中一个元素时，关闭所有的折叠区，再打开所单击的区域（如果所单击区域是展示的，则会关闭）。这个data-parent取值与手风琴面板容器的标识符相匹配，比如这个例子是指 #myAccordion 总结： ☑ 使用 panel 的 panel-title 做为触元素，使用panel-body的父元素作为折叠区； ☑ 使用一个 panel-group 来包含多个 panel，从而实现手风琴效果； ☑ 每个 panel 里的触发元素都要指定data-parent属性； ☑ data-parent 属性的值对应 panel-group样式元素的ID或者其他样式标识符； ☑ 触发元素需要指定 data-toggle，并且值为 collapse； ☑ 触发元素都要指定 data-target属性； ☑ data-target属性的值对应 panel-body 的父元素的ID或者其他样式标识符。查看全部
-
第三步，为了把标题和内容区捆绑在一起，可以通过锚链接的方法，把标题区域和面板区连在一起： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse" id="panel1"> <div class="panel-body">折叠区内容...</div> </div> </div> 第四步，控制面板内容区是否可视。在Bootstrap框架中，如果你想让内容区域不可视，只需要在 panel-collapse 样式上添加 collapse： <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse collapse" id="panel1"> ... 每个面板的内容区都被隐藏起来了，但有时候希望默认有面板内容是可视的,只需要在collapse基础上再追加 in 样式： <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#panel1">标题一</a></h4> </div> <div class="panel-collapse collapse in" id="panel1"> ...查看全部
-
触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。接下来我们来看一个简单的示例：（六步） 第一步，设计一个面板组合，里面有三个折叠区： <div class="panel-group" id="myAccordion"> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> <div class="panel panel-accordion panel-default"></div> </div> 第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。 <div class="panel panel-accordion panel-default"> <div class="panel-heading"> <h4 class="panel-title">标题一</h4> </div> <div class="panel-collapse"> <div class="panel-body">折叠区内容...</div> </div> </div>查看全部
-
手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel页板，如右边效果所示，他就有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group，也就是手风琴的结构。 简单点就是一个触发器和一个折叠区： <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button> <div id="demo" class="collapse in">折叠区</div>查看全部
-
警告框结构： <div class="alert " role="alert"> <buttonclass="close" type="button" >×</button> 恭喜您操作成功！ </div>查看全部
-
因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。查看全部
-
注意：在这个案例中不加入data-target="#panel1"也可以，因为前面已经有了href="#panel1"，但如是button按钮作为触发器就必须使用data-target="#panel1"语句了。查看全部
-
同样的，选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求： 1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。查看全部
举报
0/150
提交
取消