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

bootstrap快速入门

难度中级
时长 2小时 5分
学习人数
综合评分9.37
179人评价 查看评价
9.6 内容实用
9.4 简洁易懂
9.1 逻辑清晰
  • 1.不同屏幕显示不同效果 <style> .test{height: 200px; background: red;} @media screen and (max-width:900px;)and (min-width:500px){width:100%;height: 1000px; background: blue;} </style> </head> <body> <div class="test"></div> </body> 2。栅格 <style> .test{height: 200px; background: red;} </style> </head> <body> <div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-ossset-4"></div> 在超大屏幕中占1/4,普通占1/3 平板1/2 手机1/1 超大屏幕中偏移1/4 普通偏移1/3 </body>
    查看全部
    6 采集 收起 来源:栅格布局

    2018-03-22

  • 导航条----------nav 1.可切换的导航 nav-tabs 2.胶囊导航 nav-pills 3.垂直导航 nav-justified / nav-stacked 在导航之中默认选中的在li上面加active 可切换导航 <ul class="nav nav-tabs"> <li class="active"><a href="#">慕课网1</a></li> <li><a href="#">慕课网2</a></li> <li><a href="#">慕课网3</a></li> </ul> 胶囊式 <ul class="nav nav-pills"> <li class="active"><a href="#">慕课网1</a></li> <li><a href="#">慕课网2</a></li> <li><a href="#">慕课网3</a></li> </ul> 垂直 <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">慕课网1</a></li> <li><a href="#">慕课网2</a></li> <li><a href="#">慕课网3</a></li> </ul> .active默认选中
    查看全部
    5 采集 收起 来源:导航

    2018-03-22

  • bootstrap组件-怪异的属性: 1、role: HTML5的标签属性,标识普通标签使其语义化,方便浏览器对其具体功能进行识别,给特定的浏览器使用比如盲文浏览器。 2、aria-label:用在输入框,当焦点落到输入框时读屏软件可读出输入框的内容,配合读屏软件使用。 3、tabIndex:设置键盘的Tab键在控件中的移动,就是焦点的移动顺序,方便一些有障碍的人士浏览网页。 4、data-:HTML5新增的用于自定义的属性,不影响页面显示,管理自己想要实现的数据传递,包括数据交互的一些效果。涉及组件交互,比如下拉菜单、点击等。
    查看全部
  • 网页开发中的单位 1.px是相对于屏幕分辨率的单位 其大小无法跟随屏幕放大缩小,所有浏览器都支持px单位 2.1em=16px(但不完全是),em会继承父级元素的字体大小,IE的部分浏览器不支持em 3.rem 与em类似,会继承根元素的字体大小,html{font-size:62.5%} 1rem=10px html默认font-size 16px;62.5% = 10px; 如果要写响应式,实际rem写在前面px写在后面,用rem覆盖px就可以
    查看全部
    4 采集 收起 来源:单位

    2017-06-22

  • button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝色 button:btn btn-info 浅蓝 button:btn btn-warning 黄色 button:btn btn-danger 红色 button:btn btn-link 链接按钮改 btn-lg,btn-sm 按钮变大,变小 active 按下状态 btn-block 撑满父级,全屏 属性:disabled="disabled"禁用按钮 把链接变成按钮 <a class="btn btn-danger" href="">这是</a>
    查看全部
  • 排版--表格

    <table class=""></table>

    .table 基础表格效果

    .table-striped  斑马线效果

    .table-bordered  边框效果

    .table-hover  高亮效果(鼠标经过的变色效果)

    <tr class=""></tr>  //表格颜色

    .danger

    .warping

    .info

    .success

    .active



    【Bootstrap中的表格】

     .table :基础表格

     .table-striped 条纹 、斑马线表格

     .table-bordered 带边框

     .table-hover  鼠标悬停高亮

     .table-condensed 紧凑型

     .table-responsive:响应式表格


    .danger 红色 

    .warning 黄色 

    .info 蓝色 

    .success 绿色

     .active 悬停时颜色




    查看全部
  • 排版--表格

    <table class=""></table>

    .table 基础表格效果

    .table-striped  斑马线效果

    .table-bordered  边框效果

    .table-hover  高亮效果(鼠标经过的变色效果)

    <tr class=""></tr>  //表格颜色

    .danger

    .warping

    .info

    .success

    .active

    查看全部
  • bootstrap中的响应式开发原理是栅格布局,将屏幕分为12等份。元素可以给根据不同屏幕的大小适应相应的大小,如col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4

    col-lg-3:表示在大屏幕元素宽度大小为屏幕的3/12,即1/4,

    col-md-4:表示在中等屏幕元素宽度大小为屏幕的1/3,

    col-sm-6:表示在小屏幕元素宽度大小为屏幕的1/2,

    col-xs-12:表示在极小屏幕元素宽度大小占满整个屏幕大小。

    col-lg-offset-3:表示在大屏幕中元素的位置是距离屏幕左边为屏幕大小的1/4,

    col-md-offset-4:表示在中等屏幕中元素的位置是距离屏幕左边为屏幕大小的1/3


    查看全部
    3 采集 收起 来源:栅格布局

    2018-08-06

  • 导航条----------nav 1.可切换的导航    nav-tabs 2.胶囊导航        nav-pills 3.垂直导航        nav-justified  /  nav-stacked 在导航之中默认选中的在li上面加active 可切换导航 <ul class="nav nav-tabs"> <li class="active"><a href="#">慕课网1</a></li> <li><a href="#">慕课网2</a></li> <li><a href="#">慕课网3</a></li> </ul> 胶囊式 <ul class="nav nav-pills"> <li class="active"><a href="#">慕课网1</a></li> <li><a href="#">慕课网2</a></li> <li><a href="#">慕课网3</a></li> </ul> 垂直 <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">慕课网1</a></li> <li><a href="#">慕课网2</a></li> <li><a href="#">慕课网3</a></li> </ul> .active默认选中

    查看全部
    3 采集 收起 来源:导航

    2018-04-03

  • 一个基本的弹窗效果 类比Antd(antd的设计理念基本继承了BootStrap) 就明白了 另外: data-toggle="modal" //该组件绑定了modal.js data-target="#myModal" //该组件指向了id="myModal"的组件
    查看全部
  • <script> //手机淘宝参考 var metaEl = doc.createElement('meta'); var scale =isRetina ? 0.5:1; metaEl.setAttribute('name','viewport'); metaEl.setAttribute('content','initial-scale='+ scale +',maximum-scale='+ scale +',minimum-scale='+ scale +','user-scalable=no'); if(docEl.firstElementChild){ document.documentElement.firstElementChild.appendChild(metaEl); }else{ var wrap=doc.createElement('div'); wrap.appendChild(metaEl); documen.write(wrap.innerHTML); } </script>
    查看全部
    3 采集 收起 来源:viewport

    2018-03-22

  • Bootstrap——表单(1): html5特性: placeholder 给用户输入一个提示 form->form-inline 它的所有元素是内联的,向左对齐的,标签是并排的,水平排版 div->form-group 将label和input(或其他)组合成一个组件 input->input-lg/sm 改变输入框大小 input->form-control 圆角方框发光 label->sr-only 取消提示信息 label-> control-label 可更改相关样式 div->has-successs/waring has-error等可改变颜色 (label等元素中要有control-label)
    查看全部
  • 用于修改文字样式 <mark>强调文字,底边变黄 <del>删除文字,中间有横线 <ins>下划线 <u>下划线 <small>文字变小 <strong>文字加粗 对齐方式 text-left左对齐 text-center居中 text-right右对齐 英文大小写变换 text-lowercase大写变小写 text-uppercase小写变大写 text-capitalize首字母大写
    查看全部
  • 1、role: HTML5的标签属性,标识标签使其语义化,方便浏览器对其具体功能进行识别,给特定的浏览器使用比如盲文浏览器 2、aria-label:用在输入框,当焦点落到输入框时读屏软件可读出输入框的内容 3、tabIndex:设置键盘的Tab键在控件中的移动,就是焦点的移动顺序,方便一些有障碍的人士浏览网页 4、data-:HTML5新增的用于自定义的属性,不影响页面显示,管理自己想要实现的数据传递,包括数据交互的一些效果。 本章节跳过1/2/3属性,会涉及4、data-。
    查看全部
  • Bootstrap组件-怪异的属性

    1.role        html5标签属性

    2.aria-label        通常使用在输入框

    3.tabIndex

    4.data-      html5规范自定义属性,在页面上不显示

    查看全部
首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
本教程适合具有一定前端基础的人员,对HTML、CSS、JavaScript有一定的了解。
老师告诉你能学到什么?
(1)如何快速搭建网页 (2)如何使用组件开发 (3)使用bootstrap插件实现网页的开发

微信扫码,参与3人拼团

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

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