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

玩转Bootstrap(基础)

  • yiku~
    查看全部
    0 采集 收起 来源:实现原理

    2015-02-03

  • button中data-target=".bs-example-modal-lg"对应div中的类.bs-example-modal-lg role="dialog":强调->“对话框” 【aria-labelledby】: 字符串。空格分隔的id们 <div aria-labelledby="title" role="alertdialog"><h3 id="title">标题</h3></div> aria-labelledby一般用在区域元素上,对于的id一般为对应的标题或是标签元素的id.关系型属性。
    查看全部
  • http://www.w3cschool.cc/bootstrap/bootstrap-v2-modal-plugin.html 此网站给出了代码的详细解释
    查看全部
  • <pre>元素一般用于显示大块的代码,并保证原有格式不变。但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
    查看全部
    0 采集 收起 来源:代码(二)

    2018-03-22

  • 在Bootstrap主要提供了三种代码风格: 1、使用<code></code>来显示单行内联代码 2、使用<pre></pre>来显示多行块代码 3、使用<kbd></kbd>来显示用户输入代码 在使用代码时,用户可以根据具体的需求来使用不同的类型: 1、<code>:一般是针对于单个单词或单个句子的代码 2、<pre>:一般是针对于多行代码(也就是成块的代码) 3、<kbd>:一般是表示用户要通过键盘输入的内容 不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“&lt;”来替代,大于号(>)使用“&gt;”来替代。而且对于<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。建议在编写HTML标签时,就控制好
    查看全部
    0 采集 收起 来源:代码(一)

    2018-03-22

  • 水平定义列表就像内联列表一样,Bootstrap可以给<dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式: 1、将dt设置了一个左浮动,并且设置了一个宽度为160px 2、将dd设置一个margin-left的值为180px,达到水平的效果 3、当标题宽度超过160px时,将会显示三个省略号
    查看全部
  • Bootstrap像去点列表一样,通过添加类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示。也可以说内联列表就是为制作水平导航而生。
    查看全部
  • 小伙伴们可以看到,在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
    查看全部
  • 特别声明:目前两端对齐在各浏览器下解析各有不同,特别是应用于中文文本的时候。所以项目中慎用。
    查看全部
    0 采集 收起 来源:文本对齐风格

    2015-02-03

  • 为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格: ☑ .text-left:左对齐 ☑ .text-center:居中对齐 ☑ .text-right:右对齐 ☑ .text-justify:两端对齐
    查看全部
    0 采集 收起 来源:文本对齐风格

    2015-02-03

  • 在排版中,除了用加粗来强调突出的文本之外,还可以使用斜体。斜体类似于加粗一样,除了可以给元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过使用标签<em>或<i>来实现。
    查看全部
    0 采集 收起 来源:斜体

    2018-03-22

  • .text-muted:提示,使用浅灰色(#999) .text-primary:主要,使用蓝色(#428bca) .text-success:成功,使用浅绿色(#3c763d) .text-info:通知信息,使用浅蓝色(#31708f) .text-warning:警告,使用黄色(#8a6d3b) .text-danger:危险,使用褐色(#a94442)
    查看全部
    0 采集 收起 来源:强调相关的类

    2015-02-15

  • bootstrap中的“模态弹出框”有以下几个特点: 1、模态弹出窗是固定在浏览器中的。 2、单击右侧全屏按钮,在全屏状态下,模态弹出窗宽度是自适应的,而且modal-dialog水平居中。 3、当浏览器视窗大于768px时,模态弹出窗的宽度为600px。
    查看全部
  • Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在【modal-content】中。 其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮 【弹出窗的主体样式实现】: 但是对于一个模态弹出窗而言,modal-content才是样式的关键。其主要设置了弹出窗的边框、边距、背景色和阴影等样式。 [这三个部分主要控制一些间距的样式。]
    查看全部
  • 默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果: ☑ 模态弹出窗(Modal)的滑动和渐变效果; ☑ 选项卡(Tab)的渐变效果; ☑ 警告框(Alert)的渐变效果; ☑ 图片轮播(Carousel)的滑动效果。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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