美文网首页我爱编程
ios-html-bootStrap

ios-html-bootStrap

作者: DeerRun | 来源:发表于2017-06-14 15:38 被阅读50次

    综合运用:初识bootstrap

    5.1 功能

    • 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
    • github上用户达8w+

    5.2 强大的组件功能

    • 字体图标
    • 下拉菜单
    • 徽章
    • 多风格进度条
    • 面板

    5.3 项目运用

    • 在原有基础上进行定制
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>bootstrap</title>
        <!--引入外部框架-->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body {
                margin: 50px;
            }
            .text1 {
                width: 200px;
                color: purple;
            }
            .text2 {
                color: #ac2925;
                font-size: 50px;
                background-color: #2aabd2;
            }
        </style>
    </head>
    <body>
        <!--按键-->
        <button class="btn btn-danger text1"> 百度一下 </button>
        <button class="btn btn-success"> 谷歌一下 </button>
        <button class="btn btn-toolbar"> 搜狗一下 </button>
    
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                <span class="sr-only">30% Complete</span>
            </div>
        </div>
    
        <a href="#">Inbox <span class="badge">42</span></a>
    
        <button class="btn btn-primary" type="button">
            Messages <span class="badge">4</span>
        </button>
    
        <span class="glyphicon glyphicon-asterisk text2"></span>
    
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <strong>Warning!</strong> Better check yourself, you're not looking too good.
        </div>
    
    
    </body>
    </html>
    
    bootstrap

    相关文章

      网友评论

        本文标题:ios-html-bootStrap

        本文链接:https://www.haomeiwen.com/subject/gbasqxtx.html