前端开发框架Bootstrap使用教程

前端开发框架Bootstrap使用教程

34课时 |
23283人已学 |
(9 评论)

加入学习
加入学习
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>排版02</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    </head>

    <body>
        <div class="container">
            <!--标记哈,给mark的字增加淡黄色背景色-->
            <!--del和s,ins和u都会出现删除线,效果一样,都会出现时为了增加代码阅读性>-->
            <!--small将被设置为父容器字体大小的 85%,和标题的small的font-size不同
            -->
            <p>欢迎来到<mark>阿里云大学</mark>,<ins>希望</ins>您能通过<del>本套本套本套本套本套本套</del>课程以及bootstrap中文网来学习bootstrap开源框架<br /><s>欢迎来到阿里云大学</s>,<u>希望</u><small>您能通过本套课程以及bootstrap中文网来学习bootstrap开源框架</small></p>
            <!--strong着重(增加font-weight值),em斜体-->
            <p>欢迎来到<strong>阿里云大学</strong>,<em>希望您能通过本套本套本套</em>本套本套本套课程以及bootstrap中文网来学习bootstrap开源框架</p>
            <!--left:左,right:右,center:中,,justify:整理,nowrap:禁止文字自动换行-->
            <p class="text-left">Left aligned text.</p>
            <p class="text-center">Center aligned text.</p>
            <p class="text-right">Right aligned text.</p>
            <p class="text-justify">Justified text.</p>
            <p class="text-nowrap">No wrap text.</p>
            <!--依次是全文小写,全文大写,首字母大写-->
            <p class="text-lowercase">Lowercased text.</p>
            <p class="text-uppercase">Uppercased text.</p>
            <p class="text-capitalize">Capitalized text.</p>
            <!-- <abbr> 元素的增强样式。缩略语元素带有 title ,文字下方有虚线,鼠标悬停文字上方时有问号同时title里的字符串会显示-->
            <abbr title="attribute sdafasdfasdfasdfasdf">attrsdfsdf</abbr>
            <!--为缩略语添加 .initialism 类,可以让 font-size 变得稍微小些-->
            <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
            
            <!--address中让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。-->
            <address>
              <strong>Twitter, Inc.</strong><br>
              1355 Market Street, Suite 900<br>
              San Francisco, CA 94103<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>

            <address>
                      <strong>Full Name</strong><br>
              <a href="mailto:#">first.last@example.com</a>
            </address>
        </div>
    </body>

</html>

[展开全文]
丝瓜炒蛋 · 2017-07-06 · 07_Bootstrap全局css样式_排版2 0

授课教师

尚学堂
前端开发学习路线重磅上线
前端基础+主流框架,前端开发技能全覆盖
阿里云开发者社区全面升级
一站式体验,助力云上开发!
进入新社区

本课程相关云产品