-
data-backdrop="static" data-keyboard="false"查看全部
-
模态弹出框--为弹出框增加过度动画效果 为模态弹出框增加过度动画效果： 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。查看全部
-
方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss=""）。例如： <!-- 触发模态弹出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态弹出窗内容 --> </div> </div> </div> 注意以下事项： 1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)； 2、data-toggle可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。 方法二：触发模态弹出窗也可以是一个链接<a>元素，那么可以使用链接元素自带的href属性替代data-target属性，如： <!-- 触发模态弹出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模态弹出窗内容 --> </div> </div> </div>查看全部
-
模态弹出框（Modals） 这一小节我们先来讲解一个“模太弹出框”，插件的源文件：modal.js。 右侧代码编辑器（30行）就是单独引入bootstrap中发布出的“modal.js”文件。 样式代码： ☑ LESS版本：modals.less ☑ Sass版本：_modals.scss ☑ 编译后的Bootstrap：对应bootstrap.css文件第5375行～第5496行查看全部
-
动画过渡（Transitions） 这一小节我们先来讲“动画过渡（Transitions）”这个插件的使用，源文件：transition.js Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法： ☑ 调用统一编译的bootstrap.js； ☑ 调用单一的过渡动画的JavaScript插件文件transition.js（右侧第29行引入Bootstrap上对外公布的transition.js的地址）。查看全部
-
备忘： 在图片为主要信息载体的网站中，图片的处理关乎网站整体更人的质量感，用户体验，所以，是一个很难处理，却无法忽略或马虎处理的问题。 如果公司是创业团队，开源节流时期，工程师人手紧缺，可以选择专业的图片服务器提供商来解决此问题。 国内比较出名的：又拍云，七牛。 通过服务商的提供的接口，从而自定义用户上传的图片的裁剪方式，然后，前端直接拿来使用即可。 像网易的lofter就是一款图片处理几近完美的产品。查看全部
-
okok查看全部
-
伪元素的其妙用法： :empty伪元素，当没有内容的时候隐藏： .badge:empty { display: none; } ----work---- <!--tab导航条徽章--> <ul class="nav nav-tabs"> <li class="active"><a href="##">商品介绍</a></li> <li><a href="##">规格参数</a></li> <li><a href="##">商品评价<span class="badge">25</span></a></li> <li><a href="##">售后保证</a></li> </ul>查看全部
-
和按钮元素button类似，label样式也提供了多种颜色： ☑ label-deafult:默认标签，深灰色 ☑ label-primary：主要标签，深蓝色 ☑ label-success:成功标签，绿色 ☑ label-in:信息标签，浅蓝色 色值与命名： ☑ label-warning：警告标签，橙色 ☑ label-danger：错误标签，红色查看全部
-
nav-tabs 与 nav-pills 区别, 前者设置了 border-bottom: 1px solid #ddd; 还是有就是圆角方面的. 前者 margin-bottom = -1px; 使用 hover的背景色能紧贴着下划线. border-radius: 4px 4px 0 0;查看全部
-
在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板： ☑ panel-primary：重点蓝 ☑ panel-success：成功绿 ☑ panel-info:信息蓝 ☑ panel-warning：警告黄 ☑ panel-danger：危险红 使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名： <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div> <div class="panel panel-primary">…</div> <div class="panel panel-success">…</div> <div class="panel panel-info">…</div> <div class="panel panel-warning">…</div> <div class="panel panel-danger">…</div>查看全部
-
面板--带有头和尾的面板 基础面板看上去太简单了，Bootstrap为了丰富面板的功能，特意为面板增加“面板头部”和“页面尾部”的效果： ☑ panel-heading：用来设置面板头部样式 ☑ panel-footer：用来设置面板尾部样式 <div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者：大漠</div> </div>查看全部
-
础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容： <div class="panel panel-default"> <div class="panel-body">我是一个基础面板，带有默认主题样式风格</div> </div>查看全部
-
Bingo！查看全部
-
Bingo!!查看全部
举报
0/150
提交
取消