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

玩转Bootstrap(基础)

  • Bootstrap3版本放弃了对IE7和火狐3.0的支持 Bootstrap3所有的js插件依赖于jQuery,因此jQuery要在Bootstrap之前引入 <!--在IE运行最新的渲染模式--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--初始化浏览器的显示--> <meta name="viewport" content="width=device-width, initial-scale=1"> width=device-width//让宽度等于设备的宽度 initial-scale=1//设置页面载入的时候缩放的比例 为什么要把js文件放在body的最下面,特地百度了一下: 把js放在body里,主要是为了加速页面加载。 如果把js 放到head头部加载,会延迟页面加载时间。因为js加载是同步加载。有抑制加载的作用。 这里面主要涉及的是加载顺序、js是单线程。 由于浏览器解析是自上而下加载解析,如果一个很大的js文件放在head里面,由于js是单线程,那么浏览器会一直解析, 而无法加载解析后面的dom tree,以至于页面出现空白,如果放在body最下面,这样dom tree会先加载解析,呈现出页 面再加载解析js里面的内容,这样用户体验会更好。 如果js放在head里面,引用了某个dom,但是这时你还没加载dom tree,会报错,可以采用 window.onload = function(){} 这样来解决,或者给js设置defer 或者 async来让js异步加载,这样就不会报错了。
    查看全部
  • container(外层容器) .row(一行) .col-md-1 (一列,共12列) .col-xs超小 .col-sm .col-md .col-lg .col-md-offset 偏移量(0-12对应:0% 到100%) .col-md-push右移 .col-md-pull左移
    查看全部
    5 采集 收起 来源:实现原理

    2017-04-20

  • 在id为button1的按钮上使用data-target="#myTarget"和data-toggle="modal"属性这种方法代替了以下jQuery代码: $("#button1").click=function(){ $("#myTarget").modal(); }
    查看全部
  • 1.bootstrap不支持ie的兼容模式;(加入如下代码:<meta http-equiv="X-UA-Compatible" content="IE=edge">可在IE浏览器中运行最新的渲染模式) 2.初始化移动浏览器显示<meta name="viewport" content="width=device-width,initial-scale=1">(移动浏览器是把页面放在一个虚拟的视口中,即viewport,通常这个虚拟的视口比屏幕宽,这样就不用把每个网页挤到很小的视口中,但是这样会破坏没有针对移动浏览器优化的网页布局)(viewport可用于控制大小及缩放)(代码可理解为让视口的宽度为物理设备上真实的分辨率,即宽度,初始的缩放比例为1,即不缩放) 3.载入bootstrap的css样式,用link,如下图 若IE版本低于IE9,则加入图中代码http://img1.sycdn.imooc.com//553b9b2f00018c0d12000530-120-68.jpg 4. 加入jQuery和js插件(bootstrap中的js插件依赖于jquery,因此jquery要在bootstrap之前引用。) js文件放在body的最下面 html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。 指定用户是否可以缩放视区,即缩放Web页面的视图。"是user-scalable指令 ,值为yes时允许用户进行缩放,值为no时不允许缩放。
    查看全部
  • bootstrap不支持ie的兼容模式; bootstrap中的js插件依赖于jquery,因此jquery要在bootstrap之前引用。 <meta name="viewport" content="width=device-width,initial-scale=1"> 说明:让视口的宽度等于物理设备上真实的分辨率,初始缩放比例为1,即不做任何缩放。适配浏览器时需要加入的代码
    查看全部
  • 1.Bootstrap是简单灵活的用于搭建Web页面的HTML、CSS、JavaScript的工具集,整体形成一个前端开发框架 2.基于html5、css3的bootstrap,具有大量的诱人特性: (1)漂亮的设计; (2)友好的学习曲线; (3)卓越的兼容性; (4)响应式设计; (5)12列格网; (6)样式向导文档。 3.自定义JQuery插件,完整的类库,基于Less等。
    查看全部
    4 采集 收起 来源:Bootstrap简介

    2016-10-03

  • 刚刚试了下,把喜欢或者喜欢调换位置 放在checkbox的上面显示效果也是一样的 另外使用lable你可以把checkbox包起来 也可以<label for="id"></lable> 之所以用到label是为了将文字和checkbox 绑定在一起 点击文字就相当于点击了checkbox 另外在css样式里有这么一段 cursor :pointer 是让其出现鼠标小手 目的为了提醒用户该文字是可以点击的
    查看全部
  • 除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,“.btn-group”容器里的标签元素需要带有类名“.btn”。 对于结构方面,非常的简单。使用一个名为“btn-group”的容器,把多个按钮放到这个容器中。 <div class="btn-group"> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-step-backward"></span> </button>
    查看全部
  • 强调内容 可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。 “.lead”对应的样式如下: /*源码查看bootstrap.css文件第470行~480行*/ Bootstrap还通过元素标签:<small>、<strong>、<em>和<cite>给文本做突出样式处理。 /*源码查看bootstrap.css文件第55行~第58行*/ /*源码查看bootstrap.css文件第481行~第484行*/ /*源码查看bootstrap.css第485行~第487行*/
    查看全部
    3 采集 收起 来源:强调内容

    2018-03-22

  •  bootstrap:

          简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。

          基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设计,12列格网,样式向导文档。

          自定义JQuery插件,完整的类库,基于Less等。


    查看全部
  • 以前学radio的时候经常会弄混"name"、"value"和选择框文本三个东西。这里说明一下:1.radio是按组来区分选择框的,“name”其实是组名,只有选择框的“name”相同才表明同组,这样才可以实现单选,试想一下,如果不同组那你选你的我选我的就都可以勾选了也就不是单项选择框了;2.“value”代表的是这个选择框的值,是提交服务器用的,因为服务器要识别选择框的值,所以“value”的值必须不同这样才能区分不同选择框;3.选择框文本直接在<input>标签后写上就行。总结一句就是"name"必须相同,"value"必须不同,文本在标签之后。
    查看全部
  • 1.自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:data-toggle="dropdown" 2.将tabIndex赋值为-1,则在使用[Tab]键时,此元素被忽略。 3.使用role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,属于WAI-ARIA. 例如点击的按钮,就是role="button" 4.aria-label属性: 正常情况下,会在表单里给input组件指定对应的label,当用户tab到输入框时,读屏软件就会读出相应label里的文本。 如:<label for=”username”>用户名:</label><input type=”text” id=”username”/> 当没有给输入框设计对应的label文本的位置时,aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。 如:<input type=”text” aria-label=”用户名”/> 此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”。 aria-labelledby属性: 当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id。
    查看全部
  • Bootstrap标题样式进行了以下显著的优化重置: 1、重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px;h4~h6重置后的值都是10px。 2、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体。 3、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px。
    查看全部
    3 采集 收起 来源:标题(一)

    2016-12-12

  • 1.自定义“data-toggle”属性,且值必须和最外容器类名一致,此示例为:data-toggle="dropdown" 2.将tabIndex赋值为-1,则在使用[Tab]键时,此元素被忽略。 3.使用role属性告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,属于WAI-ARIA. 例如点击的按钮,就是role="button" 4.aria-label属性: 正常情况下,会在表单里给input组件指定对应的label,当用户tab到输入框时,读屏软件就会读出相应label里的文本。 如:<label for=”username”>用户名:</label><input type=”text” id=”username”/> 当没有给输入框设计对应的label文本的位置时,aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。 如:<input type=”text” aria-label=”用户名”/> 此时,当焦点落到该输入框时,读屏软件就会读出aria-label里的内容,即“用户名”。 aria-labelledby属性: 当想要的标签文本已在其他元素中存在时,可以将其值为该元素的id
    查看全部
  • 这一章比较有用
    查看全部
    2 采集 收起 来源:响应式导航条

    2016-03-18

首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

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

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