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

玩转Bootstrap(基础)

  • <ol> ordered list有序列表 <ul> unordered list 无序列表 <dl> defined list 自定义列表
    查看全部
    0 采集 收起 来源:列表--简介

    2018-03-22

  • 移动端适配 <meta name="viewport" content="width=device-width, initial-scale=1">
    查看全部
    0 采集 收起 来源:基本的HTML模板

    2018-03-22

  • 1.所有bootstrap都基于jquery,所以在使用bootstrap之前先要引入jquery的依赖; 2.注意viewport的作用; 3.页面布局:css放在head中、js放在body的底部;
    查看全部
  • .navbar-fixed-top:导航条固定在浏览器窗口顶部 .navbar-fixed-bottom:导航条固定在浏览器窗口底部 这样我们就可以不用写div,通过z-index 来控制
    查看全部
    0 采集 收起 来源:固定导航条

    2018-03-10

  • 按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮,会显示隐藏的下拉菜单。
    查看全部
    0 采集 收起 来源:按钮下拉菜单

    2018-03-10

  • lable for='' 规定了标签跟哪个控件绑定,for中通常对应的是绑定控件的id
    查看全部
  • <ol> ordered list :有序列表 <ul> Unordered list :无序列表 <dl> defined list:自定义列表
    查看全部
    0 采集 收起 来源:列表--简介

    2018-03-22

  • input 标签的div部分class='form-gruop' input控件部分 class='form-control'
    查看全部
  • div class='table-responsive' 给表格设置的响应式布局
    查看全部
  • label label-default 用来告诉用户一些额外的消息 可以更改其他颜色 (用法和其他的颜色一样)
    查看全部
    0 采集 收起 来源:标签

    2018-03-01

  • 翻页导航:为ul标签加入pager类
    查看全部
  • 分页导航:在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination类
    查看全部
  • 响应式导航条: 使用方法: 1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。 2、保证在窄屏时要显示的图标样式(固定写法): <button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 3、并为button添加data-target=".类名/#id名",究竞是类名还是id名呢?由需要折叠的div来决定。如: 需要折叠的div代码段: <div class="collapse navbar-collapse" id="example"> <ul class="nav navbar-nav"> … </ul> </div> 窄屏时显示的图标代码段: <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example"> ... </button> 也可以这么写,需要折叠的div代码段: <div class="collapse navbar-collapse example" > <ul class="nav navbar-nav"> … </ul> </div> 窄屏时要显示的图标: <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example"> ... </button>
    查看全部
    0 采集 收起 来源:响应式导航条

    2018-03-22

  • Bootstrap框架提供了两种固定导航条的方式: .navbar-fixed-top:导航条固定在浏览器窗口顶部 .navbar-fixed-bottom:导航条固定在浏览器窗口底部 存在bug及解决方法: 从运行效果中大家不难发现,页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容,我们需要在body上做一些处理: body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ } 因为固定导航条默认高度是50px,我们一般设置padding-top和padding-bottom的值为70px,当然有的时候还是需要具体情况具体分析。
    查看全部
    0 采集 收起 来源:固定导航条

    2018-03-01

  • Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素。框架提供了三种其他样式: 1、导航条中的按钮navbar-btn 2、导航条中的文本navbar-text 3、导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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