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

玩转Bootstrap(基础)

  • 表格

    表格是Bootstrap的一个基础组件之一,

    Bootstrap为表格提供了

    1种基础样式和

    4种附加样式以及

    1个支持响应式的表格。

    在使用Bootstrap的表格过程中,

    只需要添加对应的类名就可以得到不同的表格风格,在接下来的内容中,

    我们会详细介绍Bootstrap的表格使用。

    https://img1.sycdn.imooc.com//5b57f6c200017e3803820449.jpg

    查看全部
    0 采集 收起 来源:表格

    2018-07-25

  • 代码(二)

    正如前面所示,<pre>元素一般用于显示大块的代码,并保证原有格式不变。

    但有时候代码太多,而且不想让其占有太大的页面篇幅,就想控制代码块的大小。

    Bootstrap也考虑到这一点,你只需要在pre标签上添加类名“.pre-scrollable”,

    就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。

    https://img1.sycdn.imooc.com//5b57f6470001d13c03770201.jpg

    查看全部
    0 采集 收起 来源:代码(二)

    2018-07-25

  • 代码(一)

    https://img1.sycdn.imooc.com//5b57f5860001a49403470308.jpg

    https://img1.sycdn.imooc.com//5b57f5a30001f52f03490595.jpg


    查看全部
    0 采集 收起 来源:代码(一)

    2018-07-25

  • 列表--水平定义列表

    https://img1.sycdn.imooc.com//5b5722e6000160d903580519.jpg

    https://img1.sycdn.imooc.com//5b5722f20001507003620277.jpg

    宽屏下的效果(屏幕大于768px):

    53ad0ff90001418208740117.jpg

    当你缩小你的浏览器屏幕时,水平定义列表将回复到原始的状态。

    53ad10270001db6f06200172.jpg



    查看全部
  • 列表--定义列表

    https://img1.sycdn.imooc.com//5b57225d0001c00c03740614.jpg

    查看全部
  • 列表--内联列表

    Bootstrap像去点列表一样,

    通过添加类名“.list-inline”来实现内联列表,

    简单点说就是把垂直列表换成水平列表,

    而且去掉项目符号(编号),保持水平显示。

    也可以说内联列表就是为制作水平导航而生。

    https://img1.sycdn.imooc.com//5b5720e8000180d803590436.jpg

    查看全部
  • 小伙伴们可以看到,在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的,

    但在实际工作中很多时候,我们的列表是不需要这个编号的,比如说用无序列表做导航的时候。

    Bootstrap为众多开发者考虑的非常周道,通过给无序列表添加一个类名“.list-unstyled”,

    这样就可以去除默认的列表样式的风格。


    查看全部
  • 列表--无序列表、有序列表

    https://img1.sycdn.imooc.com//5b571edc0001a35403720533.jpg

    https://img1.sycdn.imooc.com//5b571f300001558a02460508.jpg

    查看全部
  • 列表--简介

    https://img1.sycdn.imooc.com//5b571ea700018eb703690717.jpg

    https://img1.sycdn.imooc.com//5b571ec10001e76b01780214.jpg

    查看全部
    0 采集 收起 来源:列表--简介

    2018-07-24

  • 文本对齐风格

    https://img1.sycdn.imooc.com//5b571e460001e24503690387.jpg

    https://img1.sycdn.imooc.com//5b571e5700012e5f03680478.jpg

    https://img1.sycdn.imooc.com//5b571e840001ccde05380305.jpg

    查看全部
    0 采集 收起 来源:文本对齐风格

    2018-07-24

  • 强调相关的类

    https://img1.sycdn.imooc.com//5b571db0000115ec04670220.jpg

    https://img1.sycdn.imooc.com//5b571e120001582c04410211.jpg

    查看全部
    0 采集 收起 来源:强调相关的类

    2018-07-24

  • 斜体

    在排版中,除了用加粗来强调突出的文本之外,还可以使用斜体。

    https://img1.sycdn.imooc.com//5b571d440001e18703710168.jpg

    查看全部
    0 采集 收起 来源:斜体

    2018-07-24

  • 粗体

    粗体就是给文本加粗,在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中,可以使用<b>和<strong>标签让文本直接加粗。


    查看全部
    0 采集 收起 来源:粗体

    2018-07-24

  • 强调内容

    在实际项目中,对于一些重要的文本,希望突出强调的部分都会做另外的样式处理。Bootstrap同样对这部分做了一些轻量级的处理。

    https://img1.sycdn.imooc.com//5b57185100019f3d04640483.jpg

    https://img1.sycdn.imooc.com//5b5718600001b66604600406.jpg


    查看全部
    0 采集 收起 来源:强调内容

    2018-07-24

  • 段落(正文文本)

    https://img1.sycdn.imooc.com//5b57174f0001496004630682.jpg

    https://img1.sycdn.imooc.com//5b57177c00010b4704560352.jpg


    查看全部

举报

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

微信扫码,参与3人拼团

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

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