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

玩转Bootstrap(基础)

  • 只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。

    查看全部
    0 采集 收起 来源:列偏移

    2018-12-25

  • 表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。

    查看全部
    0 采集 收起 来源:基础表单

    2018-12-25

  • 千万注意,你的<table>元素中一定不能缺少类名“table”。

    查看全部
  •  .table-condensed:紧凑型表格

    已经改为 

    .table-sm

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

    2018-12-25

  • &lt:

    &gt:


    <>

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

    2018-12-25

  • <ol>

        <li>有序项目列表一</li>

        <li>有序项目列表二

        <ul class="list-unstyled">

            <li>有序二级项目列表一</li>

            <li>有序二级项目列表二

            <ul>

                <li>无序三级项目列表一</li>

                <li>无序三级项目列表二

                <ul class="list-unstyled">

                    <li>无序四级项目列表一</li>

                    <li>无序四级项目列表二</li>

                </ul>

                </li>

                <li>无序三级项目列表三</li>

            </ul>

            </li>

            <li>有序二级项目列表三</li>

        </ul>

        </li>

        <li>有序项目列表三</li>

    </ol>


    查看全部
  • <h1><small></small></h1>


    1. use <small></small> to define second title

    2. put it inside 1st title

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

    2018-12-24

  • 在Bootstrap中为了让非标题元素和标题使用相同的样式,还特意定义了.h1~.h6六个类名。

    <h1></h1>

    <div class="h1"></div>


    这两个结果是一样的

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

    2018-12-24

  • Evn

    rol="search"

    role属性的作用是告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色,主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文

    查看全部
    0 采集 收起 来源:导航条基础

    2018-12-20

  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>基本导航条</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <style>

            .myLabel{

                position: absolute;

                top: -2px;

                left: 42px;

            }

            .samllTriangle{

                border-top: 6px solid transparent;

                border-right: 6px solid transparent;

                border-bottom: 6px solid transparent;

                border-left: 6px solid #d9534f;

                position: absolute;

                top: 5px;

                left: 42px;

            }

        </style>

    </head>

    <body>

        <div class="navbar navbar-inverse">

            <!-- 导航条标题 -->

            <div class="navbar-header">

                <a href="##" class="navbar-brand">民生新闻-老百姓身边的新闻</a>

            </div>

            <ul class="nav navbar-nav">

                <li class="active"><a href="##">首页</a></li>

                <!-- 增加标签 -->

                <li >

                    <a href="##">热点</a>

                    <span class="label label-danger myLabel">hot</span>

                    <div class="samllTriangle"></div>

                </li>

                <li><a href="##">娱乐</a></li>

                <!-- 二级菜单 -->

                <li>

                    <a href="##" class="dropdown-toggle" data-toggle="dropdown">

                        体育

                        <span class="caret"></span>

                    </a>

                    <ul class="dropdown-menu">

                        <li><a href="#">羽毛球</a></li>

                        <li><a href="#">足球</a></li>

                        <li class="disabled"><a href="#">篮球</a></li>

                    </ul>

                </li>

                <li><a href="##">社会</a></li>

            </ul>

        </div>

    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 


    </body>

    </html>



    查看全部
    1 采集 收起 来源:标签

    2018-12-10

  • 无序列表

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

    有序列表

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

    定义列表

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

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

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

    2018-12-06

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


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

    2018-12-06

  • p标签  通过改变类名,来强调文字的重要性

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

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

    2018-12-06

  • <em>或<i>标签实现 字体斜体显示

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

    2018-12-06

  • 使用<b>和<strong>标签让文本直接加粗

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

    2018-12-06

举报

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

微信扫码,参与3人拼团

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

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