-
蒙板样式实现： 在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”，只不过他默认情况下是全屏黑色的：查看全部
-
模态弹出框--结构分析 Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分： 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮查看全部
-
动画过渡（Transitions）:对应的插件文件“transition.js” 模态弹窗（Modal）:对应的插件文件“modal.js” 下拉菜单（Dropdown）：对应的插件文件“dropdown.js” 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js” 选项卡（Tab）：对应的插件文件“tab.js” 提示框（Tooltips）：对应的插件文件“tooltop.js” 弹出框（Popover）：对应的插件文件“popover.js” 警告框（Alert）：对应的插件文件“alert.js” 按钮（Buttons）：对应的插件文件“button.js” 折叠/手风琴（Collapse）：对应的插件文件“collapse.js” 图片轮播Carousel：对应的插件文件“carousel.js” 自动定位浮标Affix：对应的插件文件“affix.js”查看全部
-
面板--彩色面板 在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板： panel-primary：重点蓝 panel-success：成功绿 panel-info:信息蓝 panel-warning：警告黄 panel-danger：危险红查看全部
-
面板--带有头和尾的面板 基础面板看上去太简单了，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>查看全部
-
列表组--多彩列表组 list-group-item-success：成功，背景色绿色 list-group-item-info：信息，背景色蓝色 list-group-item-warning：警告，背景色为黄色 list-group-item-danger：错误，背景色为红色 <a href="##" class="list-group-item list-group-item-success">查看全部
-
列表组--列表项的状态设置 active：表示当前状态 disabled：表示禁用状态查看全部
-
列表组--自定义列表组 list-group-item-heading：用来定义列表项头部样式 list-group-item-text：用来定义列表项主要内容查看全部
-
列表组--带徽章的列表组 只需要在“list-group-item”中添加徽章组件“badge”： <span class="badge">13</span>查看全部
-
列表组--基础列表组 list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素 list-group-item：列表项，常用的是li元素，当然也可以是div元素查看全部
-
媒体对象--媒体对象列表 针对上图的媒体对象列表效果，Bootstrap框架提供了一个列表展示的效果，在写结构的时候可以使用ul，并且在ul上添加类名“media-list”，而在li上使用“media”，示例代码如下： <ul class="media-list"> <li class="media">查看全部
-
媒体对象--默认媒体对象 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选查看全部
-
进度条--带Label的进度条 只需要在进度条中添加你需要的值 <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >20%</div> </div>查看全部
-
进度条--层叠进度条 <div class="progress"> <div class="progress-bar progress-bar-success" ></div> <div class="progress-bar progress-bar-info" ></div> <div class="progress-bar progress-bar-warning" ></div> <div class="progress-bar progress-bar-danger" ></div> </div>查看全部
举报
0/150
提交
取消