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

玩转Bootstrap(基础)

  • 去序号列表(也可以是ol)

     <ul class="list-unstyled">

            <li>不带项目符号</li>

            <li>不带项目符号</li>

            </ul>


    查看全部
  • html的三种列表

    <ul>

        <li>无序列表信息1</li>

        <li>无序列表信息2</li>

        <li>无序列表信息3</li>

    </ul>

    <ol>

        <li>有序列表信息1</li>

        <li>有序列表信息2</li>

        <li>有序列表信息3</li>

    </ol>

    <dl>

        <dt>定义列表标题</dt>

        <dd>定义列表信息1</dd>

        <dd>定义列表信息2</dd>

    </dl>


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

    2021-01-07

  • bootstrap中水平对齐的样式

    <p class="text-left">我居左</p>
    <p class="text-center">我居中</p>
    <p class="text-right">我居右</p>
    <p class="text-justify">我两端对齐</p>


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

    2021-01-07

  • 没看明白
    查看全部
  •  ☑ .table:基础表格

      ☑  .table-striped:斑马线表格

      ☑  .table-bordered:带边框的表格

      ☑  .table-hover:鼠标悬停高亮的表格

      ☑  .table-condensed:紧凑型表格

      ☑  .table-responsive:响应式表格


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

    2020-11-20

  • 基本用法                           

    网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。由于Bootstrap框架在不同屏幕尺寸使用了不同的网格样式,在这一节中所涉及到的示例,我们都以中屏(970px)为例进行介绍,其他屏幕的使用也类似这一种。关于屏幕尺寸如下图:

    1、列组合

    列组合简单理解就是更改数字来合并列(原则:列总和数不能超12),有点类似于表格的colspan属性


    实现列组合方式非常简单,只涉及两个CSS两个特性:浮动宽度百分比

    查看全部
    0 采集 收起 来源:基本用法

    2020-08-01

  • (.column),但列数之和不能超过平分的总列数,比如12。如:

    <div class="container">
    <div class="row">
      <div class="col-md-4"></div>
      <div class="col-md-8"></div>

    3、具体内容应当放置在列容器(column)之内,而且只有列(column)才可以作为行容器(.row)的直接子元素

    4、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响

    查看全部
    0 采集 收起 来源:工作原理

    2020-08-01

  • 图像在网页制作中也是常要用到的元素,在Bootstrap框架中对于图像的样式风格提供以下几种风格:

    1、img-responsive:响应式图片,主要针对于响应式设计
    2、img-rounded:圆角图片
    3、img-circle:圆形图片
    4、img-thumbnail:缩略图片

    使用方法:

    使用方法非常简单,只需要在<img>标签上添加对应的类名,

    设置图片大小:

    由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以通过css样式直接修改img图片的大小,这样操作就不响应了)

    注意:

    对于圆角图片和圆形图片效果,因为是使用了CSS3的圆角样式来实现的,所以注意对于IE8以及其以下版本不支持,是没有圆角效果的。

    Bootstrap框架为了大家更好的维护图像的样式,同样将这部分样式独立出来:
    1、LESS版本,可以查阅scaffolding.less
    2、Sass版本,可以查阅_scaffolding.scss
    大家可以修改其中之一,重新编译就可以得到自己需要的图片样式效果。


    查看全部
    0 采集 收起 来源:图像

    2020-07-30

  • 按钮状态——禁用状态

    和input等表单控件一样,在Bootstrap框架的按钮中也具有禁用状态的设置。禁用状态与其他状态按钮相比,就是背景颜色的透明度做了一定的处理,opcity的值从100%调整为65%。

    在Bootstrap框架中,要禁用按钮有两种实现方式:

    方法1:在标签中添加disabled属性

    方法2:在元素标签中添加类名“disabled”

    两者的主要区别是:

    “.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于<a>标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。


    查看全部
  • Bootstrap框架针对按钮的状态做了一些特殊处理。在Bootstrap框架中针对按钮的状态效果主要分为两种:活动状态和禁用状态。

    Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)几种。
    /


    查看全部
  • Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的padding和margin值。在实际当中,常把这种按钮称为块状按钮。

    查看全部
    0 采集 收起 来源:块状按钮

    2020-07-30

  • 在Bootstrap框架中不同的按钮风格都是通过不同的类名来实现,在使用过程中,开发者只需要选择不同的类名即可:

    使用起来就很简单,就像前面介绍的默认按钮一样的使用方法,只需要在基础按钮“.btn”基础上追加对应的类名,就可以得到需要的按钮风格。

    查看全部
    0 采集 收起 来源:定制风格

    2020-07-30

  • 多标签支持

    一般制作按钮除了使用<button>标签元素之外,还可以使用<input type="submit">和<a>标签等。同样,在Bootstrap框架中制作按钮时,除了刚才所说的这些标签元素之外,还可以使用在其他的标签元素上,唯一需要注意的是,要在制作按钮的标签元素上添加类名“btn”。如果不添加是不会有任何按钮效果


    查看全部
    0 采集 收起 来源:多标签支持

    2020-07-30

  • 默认按钮

    Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后通过“.btn-default”定义了一个默认的按钮风格。默认按钮的风格就是在基础按钮的风格的基础上修改了按钮的背景颜色、边框颜色和文本颜色


    查看全部
    0 采集 收起 来源:默认按钮

    2020-07-30

  • 表单控件状态(验证状态)

    在制作表单时,不免要做表单验证。同样也需要提供验证状态样式,在Bootstrap框架中同样提供这几种效果。
    1、.has-warning:警告状态(黄色)
    2、.has-error:错误状态(红色)
    3、.has-success:成功状态(绿色)
    使用的时候只需要在form-group容器上对应添加状态类名。


    查看全部

举报

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

微信扫码,参与3人拼团

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

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