为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(基础)

  • 层叠进度条 <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>
    查看全部
  • 在进度条“progress progress-striped”两个类的基础上再加入“active”类名实现动态条纹进度条 <div class="progress progress-striped active"> <div class="progress-bar" ></div> </div>
    查看全部
  • <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" ></div> </div>
    查看全部
  • 信息进度条 成功进度条 警告进度条 错误进度条 具体使用就非常简单了,只需要在基础的进度上增加对应的类名。如: <div class="progress"> <div class="progress-bar progress-bar-success" ></div> </div>
    查看全部
  • 虽然这样实现了基本进度条效果,但对于残障人员浏览网页有点困难,所以我们可以将结构做得更好些(语义化更友好些): <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">40% Complete</span> </div> </div> 1、role属性作用:告诉搜索引擎这个div的作用是进度条。 2、aria-valuenow="40"属性作用:当前进度条的进度为40%。 3、aria-valuemin="0"属性作用:进度条的最小值为0%。 4、aria-valuemax="100"属性作用:进度条的最大值为100%。
    查看全部
  • Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示 <div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> . </div>
    查看全部
  • Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示. <div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> . </div>
    查看全部
  • <div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">&times;</button> 恭喜您操作成功! </div>
    查看全部
  • 可关闭的警示框 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。 2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。 3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。 <div class="alert alert-success alert-dismissable" role="alert"><button type="button" class="close" data-dismiss="alert">&times;</button>谢谢,操作成功!</div> &times; 代表叉号
    查看全部
  • 官方网址:http://getbootstrap.com/ bootstrap版本有:v2、v3 bootstrap2:支持更多的浏览器,功能不够激进,代码不够简洁,官方已经关闭了此版本的更新 bootstrap3:放弃了对IE7.firefox v3.x的支持
    查看全部
  • 成功警示框 alert基础上加 alert-success 信息警示框 alert-info 警告 alert-warning 错误 alert-danger
    查看全部
  • Bootstrap,2011年来自 Twitter,是目前最受欢迎的前端框架。 特点:优雅、灵活、可扩展的前端工具集 定义:简单、灵活的用于搭建WEB页面的HTML、CSS、JavaScript的工具集,基于HTML 5和CSS3,漂亮的设计、友好的学习曲线,卓越的兼容性,12列响应式栅格结构,丰富的组件
    查看全部
    0 采集 收起 来源:Bootstrap简介

    2015-02-25

  • IE6-8兼容html5 引入代码<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 兼容CSS3 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    查看全部
    0 采集 收起 来源:基本的HTML模板

    2018-03-22

  • <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
    查看全部
    0 采集 收起 来源:基本的HTML模板

    2018-03-22

  • bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可。 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码: <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    查看全部
    0 采集 收起 来源:基本的HTML模板

    2018-03-22

举报

0/150
提交
取消
课程须知
本教程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!