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

玩转Bootstrap(基础)

  • 在HTML文档中,列表结构主要有三种:有序列表、无序列表和定义列表。具体使用的标签说明如下:

    无序列表

    <ul>     <li>…</li> </ul>

    有序列表

    <ol>     <li>…</li> </ol>

    定义列表

    <dl>     <dt>…</dt>     <dd>…</dd> </dl>


    Bootstrap根据平时的使用情形提供了六种形式的列表:

         普通列表

         有序列表

         去点列表

         内联列表

         描述列表

         水平描述列表


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

    2019-02-11

  • 为了简化操作,方便使用,Bootstrap通过定义四个类名来控制文本的对齐风格:

        .text-left:左对齐

        .text-center:居中对齐

        .text-right:右对齐

        .text-justify:两端对齐


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

    2019-02-11

  • Bootstrap还定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:

    • .text-muted:提示,使用浅灰色(#999)

    • .text-primary:主要,使用蓝色(#428bca)

    • .text-success:成功,使用浅绿色(#3c763d)

    • .text-info:通知信息,使用浅蓝色(#31708f)

    • .text-warning:警告,使用黄色(#8a6d3b)

    • .text-danger:危险,使用褐色(#a94442)


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

    2019-02-11

  • 在Bootstrap中还可以通过使用标签<em>或<i>来实现。
    例如,下面的代码使用了<em>和<i>标签定义了强调文本:

    <p>我在慕课网上跟<em>大漠</em>一起学习<i>Bootstrap</i>的使用。我一定要学会<i>Bootstrap</i>。</p>


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

    2019-02-11

  • 在Bootstrap中,可以使用<b>和<strong>标签让文本直接加粗。
    /*源码查看bootstrap.css文件第55行~第58行*/

    b,strong {
      font-weight: bold; /*文本加粗*/
    }


    例如,下面的代码使用<strong>标签定义了强调文本:

    <p>我在学习<strong>Bootstrap</strong>,我要掌握<strong>Bootstrap</strong>的所有知识。</p>


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

    2019-02-11

  • 如果想让一个段落p突出显示,可以通过添加类名“.lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理。用法如下:

    <p>我是普通文本,我的样子长成这样我是普通文本,我的样子长成这样我是普通文本,</p>
    <p class="lead">我是特意要突出的文本,我的样子成这样。我是特意要突出的文本,我的样子长成这样。</p>


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

    2019-02-11

  • 在Bootstrap中为文本设置了一个全局的文本样式(这里所说的文本是指正文文本):

    1、全局文本字号为14px(font-size)。

    2、行高为1.42857143(line-height),大约是20px(大家看到一串的小数或许会有疑惑,其实他是通过LESS编译器计算出来的,当然Sass也有这样的功能)。

    3、颜色为深灰色(#333);

    4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;(font-family),或许这样的字体对我们中文并不太合适,但在实际项目中,大家可以根据自己的需求进行重置,在此我们不做过多阐述,我们回到这里。该设置都定义在<body>元素上,由于这几个属性都是继承属性,所以Web页面中文本(包括段落p元素)如无重置都会具有这些样式效果。


    查看全部
  • 1、行高都是1,而且font-weight设置了normal变成了常规效果(不加粗),同时颜色被设置为灰色(#999)。
    2、由于<small>内的文本字体在h1~h3内,其大小都设置为当前字号的65%;而在h4~h6内的字号都设置为当前字号的75%;
    详细代码请参阅bootstrap.css文件中第407行~第443行。

    查看全部
    1 采集 收起 来源:标题(二)

    2019-02-11

  • Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式,使用其在所有浏览器下显示的效果一样,具体定义的规则可以如下表所示:

    通过比较可以发现,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。

    标题的具体运用非常简单,和我们平时运用是一样的,使用<h1>~<h6>标签,分别表示标题一至标题六,h 后面的数字越大,表示级别越小,文本也越小。来看一个简单的效果:右侧代码编辑器中的10-16行的代码。

    在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。如右侧代码编辑器中   18-23行代码所示:

    对比两个示例的效果图,可以说他们的效果是一模一样的。


    查看全部
    1 采集 收起 来源:标题(一)

    2019-02-11

  • Css放在head中, Js放在body
    查看全部
    0 采集 收起 来源:基本的HTML模板

    2019-02-06

  • bootstrap起步注意点:

    查看全部
  • <ul class="list-unstyled"> 列表去点操作

    <li>城市:</li>

        <ul class=list-inline>     将列表行化,变为导航

            <li>北京</li>

            <li>上海</li>

            <li>南京</li>

            <li>厦门</li>

        </ul>

    </ul>


    查看全部
  •  bootstrap声明式触发方法一般依赖于data-xxx属性

    比如:data-toggle=""/data-dismisse=""

    查看全部
    1. 把窄屏时需要折叠的内容包裹在一个div

    2. 编写一个button,用于窄屏时显示的图标样式

    3. 在button上添加data-target="#/.",里面的内容取决于(1)div上定义的是类名还是id

    查看全部
    0 采集 收起 来源:响应式导航条

    2019-01-28

  • 外层是.btn-group 而不是dropdown-menu

    查看全部

举报

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

微信扫码,参与3人拼团

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

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