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

玩转Bootstrap(基础)

  • 牢记几个单词: default/primary/info/success/warning/danger/inverse 这些词很多地方有出现
    查看全部
  • 在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。 回顾上一小节讲解,原来“.checkbox”和“.radio”主要是解决对齐问题的,本小节(一行展示)是不需要的
    查看全部
  • 记录一下单选框与复选框 1、checkbox与radio标签都用label标签包起来了; 2、checkbox连同label标签放置在一个名为“.checkbox”的容器内; 3、radio连同label标签放置在一个名为“.radio”的容器内; 在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
    查看全部
  • bootstrap有2和3两个版本。
    查看全部
  • bootstrap中的所有插件都有依赖于jQuery,所以jQuery要在bootstrap之前引入
    查看全部
  • 页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容,我们需要在body上做一些处理: body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ } 因为固定导航条默认高度是50px,我们一般设置padding-top和padding-bottom的值为70px,当然有的时候还是需要具体情况具体分析。 第二种解决这个bug方法: 其实除了这种解决方案之外,我们还有其他的解决方法,把固定导航条都放在页面内容前面: <div class="navbar navbar-default navbar-fixed-top" role="navigation">  … </div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">  … </div> <div class="content">我是内容</div> 在文件中添加下列样式代码: .navbar-fixed-top ~ .content { padding-top: 70px; } .navbar-fixed-bottom ~ .content { padding-bottom: 70px; } 当然,这种方法有的时候也是需要具体情况具体分析的。
    查看全部
    0 采集 收起 来源:固定导航条

    2018-03-22

  • 参数设置: 在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体说明如下: 参数 使用方法 描述 toggle $(“#mymodal”).modal(“toggle”) 触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示 show $(“#mymodal”).modal(“show”) 触发时,显示模态弹出窗 hide $(“#mymodal”).modal(“hide”) 触发时,关闭模态弹出窗 事件设置: 模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下: 事件类型 描述 show.bs.modal 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性 shown.bs.modal 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件 hide.bs.modal 在hide方法调用时(但还未关闭隐藏)立即触发 hidden.bs.modal 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发 调用方法也非常简单: $('#myModal').on('hidden.bs.modal', function (e) { // 处理代码... })
    查看全部
  • modal-sm:小模态框 modal-lg:大模态框
    查看全部
  • Bootstrap框架中以下组件使用了过渡动画效果 ☑ 模态弹出窗(Modal)的滑动和渐变效果; ☑ 选项卡(Tab)的渐变效果; ☑ 警告框(Alert)的渐变效果; ☑ 图片轮播(Carousel)的滑动效果。
    查看全部
  • ☑ 动画过渡(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” 上述单独插件的下载可到github去下载(https://github.com/twbs/bootstrap)。
    查看全部
  • 在bootstrap V2.x版本可以,但在Bootstrap V3.x版本将nav-tags取消了,可能作者觉得垂直选择项并不太常见,也不美观吧。
    查看全部
  • 彩色面板 ☑ panel-primary:重点蓝/ ☑ panel-success:成功绿 ☑ panel-info:信息蓝 ☑ panel-warning:警告黄 ☑ panel-danger:危险红
    查看全部
  • 带有头尾的面板 panel-heading:用来设置面板头部样式 ☑ panel-footer:用来设置面板尾部样式
    查看全部
  • 基础面板风格 <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:错误,背景色为红色
    查看全部

举报

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

微信扫码,参与3人拼团

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

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