手记

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程
继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持，我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Bootstrap 学习展示与交流

6亿少女的梦 2017-01-03 20:15:34 浏览 4326
6亿少女的梦
关注TA
已关注
手记 9
粉丝 41
获赞 468

Hello，大家好。好久没写了，最近心情不错，在2016年的最后一天脱单了。再也不是一个孤单的代码狗了。女朋友最近换了个李宇春式的发型，走在路上总感觉像兄弟，而不是情侣。（笑抽中）
最近敲代码略带拖延，还不是很适应用sublime text 3，编写网页。如有不足和错误之处，请大家多多批评指正，大家一起学习交友，代码之路你我一起奋斗，拒绝孤独感。
同为初学者建议：多去模仿别人的网页，重点在于看清结构，还有一些命名方式，相信很多人都有这种感受：当要自己编写某一部分代码的时候，就会为如何命名犯困（哈哈）。加油！！！
好了，不说废话，直接上码》》》
第一块式关于分类的学习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Learning of Pagination</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
    <header>    I am header.</header>
    <div class="container">
        <div class="content">
            <div class="row">
                <div class="col-md-4">
                    <h1>Primary Pagination</h1>
                    <ul class="pagination">
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                    <h1>Active Pagination</h1>
                    <p>在其中的一个li中添加类：active</p>
                    <ul class="pagination">
                        <li><a href="#">1</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                    <h1>Disabled Pagination</h1>
                    <p>使分页无法使用</p>
                    <ul class="pagination">
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li class="disabled"><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h1>大分页</h1>
                    <ul class="pagination pagination-lg">
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                    <hr style="border-top: 1px dashed #F44333">
                    <h1>小分页</h1>
                    <ul class="pagination pagination-sm">
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">1</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h1>面包屑导航 breadcrumb</h1>
                    <ul class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Home Page</a></li>
                        <li><a href="#">Home Page Viewers</a></li>
                        <li class="active">Vacation</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
<footer>I am footer.</footer>
</body>
</html>

第二块代码关于 badges 和 Label 的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Badges and Label</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

</head>
<body>
    <div class="container">
        <h1>learning of Badges</h1>
        <a href="#">News <span class="badge">5</span></a>
        <a href="#">Comments <span class="badge">10</span></a>
        <a href="#">Updates <span class="badge">5</span></a>
        <hr style="width: 250px; border-top: 1px dashed #f44333">
        <button type="button" class="btn btn-primary" id="button">Recent News<span class="badge" style="margin-left: 5px;"> 7</span></button>
    </div>
    <h1>Label 类的练习</h1>
    <div class="container">
        <h1>Hello<span class="label label-default">News</span></h1>
        <h2>Hello<span class="label label-info">News</span></h2>
        <h3>Hello<span class="label label-success">News</span></h3>
        <h4>Hello<span class="label label-danger">News</span></h4>
        <h5>Hello<span class="label label-primary">News</span></h5>
        <h6>Hello<span class="label label-warning">News</span></h6>
        <h3>Ice Cream<span class="label label-default">YES!</span></h3>
    </div>
</body>
</html>

第三块代码是关于 progressbar的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ProgressBar Learning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <h2>Primary progressBar</h2>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="70"
                    aria-valuemin="0" aria-valuemax="100" style="width: 70%;" 
                    >70%</div>
                </div>
            </div>
            <div class="col-md-4">
                <h2>隐藏进度参数的进度条</h2>
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="50"
                    aria-valuemin="0" aria-valuemax="70" style="width: 50%" 
                    >
                    <span class="sr-only">50% Complete</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <h2>多色彩进度条</h2>
            <div class="progress">
                <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                    40%(primary)
                </div>
            </div>
            <hr style="width: 250px;border-top: 1px dashed #F44333">
            <div class="progress">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                    50%(info)
                </div>
            </div>
            <hr style="width: 250px;border-top: 1px dashed #F44333">
            <div class="progress">
                <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    60%(warning)
                </div>
            </div>
            <hr style="width: 250px;border-top: 1px dashed #F44333">
            <div class="progress">
                <div class="progress-bar progress-bar-danger" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
                    70%(danger)
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="content content-progressbar">
            <div class="row">
                <div class="col-sm-4 col-md-4">
                    <h2>斑马线进度条</h2>
                    <p>只要给类加上 progress-bar-striped，这个写法和table添加斑马线极其相似</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped " role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                            <span class="sr-only">50%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped " role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped " role="progressbar"  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                            <span class="sr-only">70%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning progress-bar-striped " role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                            <span class="sr-only">80%</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <h2>动态斑马线</h2> 
                    <p>只要给类加上active即可</p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">
                            <span class="sr-only">80%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped active " role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                            <span class="sr-only">50%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
                            <span class="sr-only">60%</span>
                        </div>
                    </div>
                    <hr style="border-top: 1px dashed #F44333">
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar"  aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                            <span class="sr-only">70%</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4">
                    <h2>创建一个混合的进度条</h2>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 40%"></div>
                        <div class="progress-bar progress-bar-striped progress-bar-warning" style="width: 20%"></div>
                        <div class="progress-bar progress-bar-striped progress-bar-danger" style="width: 10%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="content-review">
            <h2>复习 进度条</h2>
            <div class="progress">
                <div class="progress-bar progress-bar-primary progress-bar-striped active" aira-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
                    <span class="sr-only">50% Complete</span>
                </div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-success active" style="width: 50%" ></div>
                <div class="progress-bar progress-bar-striped progress-bar-info active" style="width: 20%"></div>
                <div class="progress-bar progress-bar-striped progress-bar-warning active" style="width: 10%"></div>
            </div>
        </div>
    </div>
</body>
</html>

最后一块是一个实操，模仿某个知名网页的footer，也是我学bootstrap后，想要做的自己创建的公益群官网。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Footer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <!-- bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可。 -->
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <!-- 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码： -->
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<style>
a{
    color: #555555;
    text-decoration: none;
}

.main-footer{
    background: #202020;
    padding: 35px 0 0;
    color: #959595;
}
.widget{
    padding: 0px 30px;
}
.widget .title{
    font-size: 1.5em;
    color: #fff;
    margin-top: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid #959595 ;
    margin-bottom: 21px;
    position: relative;
}
.widget .title:after{
    content: "";
    width: 90px;
    height: 1px;
    background: #f4645f;
    position: absolute;
    left: 0;
    bottom: -1px;
}
.recent_sigle_post {
    margin: 20px  0;
    padding-bottom: 20px;
    border-bottom: 1px dashed #303030;  /*添加一条虚线*/
}
.recent_sigle_post .date{
    margin-top: 8px;
}

.widget .tag-clound a{
    /*border: 1px solid grey;
    display: inline-block;
    color: #fff;
    margin: 2px;
    padding: 3px 8px;*/
    border: 1px solid #303030;
    padding: 2px 7px;
    color: #959595;
    line-height: 1.5em;
    display: inline-block;
    margin: 0 7px 7px 0;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;

}
.widget .friend-link a{
    border: none;
}
.friend-link hr{
    border: 0;
    border-top: 1px dashed #303030;
}
.widget .tag-clound a:hover{
    background:#f4645f;
    color: #fff;
    text-decoration: none;
}
.copyright{
    background: #111;
    font-size: 13px;
    text-align: center;
    color: #555555;
    padding-top: 28px;
    padding-bottom: 28px;
    border-top: 1px solid #303030;
}
.copyright span a{
    text-decoration: none;
}

</style>
</head>
<body>
    <header></header>
    <article></article>
    <footer class="main-footer">
        <div class="container">
            <div class="row">
                <div class=" col-sm-4 col-md-4 col-lg-4">
                    <div class="widget">
                        <h4 class="title">
                            最新文章
                        </h4>
                        <div class="content recent-content">
                            <div class="recent_sigle_post">
                                <a href="#">友邦公益成立啦,如果可以，我是到付件数量的房间辣世界东方拉斯加分了发上来的空间分离圣诞节福利</a>
                                <div class="date">2017.01.02</div>
                            </div>
                            <div class="recent_sigle_post">
                                <a href="#">友邦公益成立啦</a>
                                <div class="date">2017.01.02</div>
                            </div>
                            <div class="recent_sigle_post">
                                <a href="#">友邦公益成立啦</a>
                                <div class="date">2017.01.02</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="widget">
                        <h4 class="title">
                            标签云
                        </h4>
                        <div class="content tag-clound">
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang</a>
                            <a href="#">xiong</a>
                            <a href="#">Huang</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">xiong</a>
                            <a href="#">Test</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                            <a href="#">Huang xiong</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 col-md-4 col-lg-4">
                    <div class="widget">
                        <h4 class="title">
                            合作伙伴
                        </h4>
                        <div class="content tag-clound friend-link">
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <hr>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <hr>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                            <a href="#">Link now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright">
            <span>
                Copyright@ 
                <a href="#">友邦公益</a>   
            </span>
            <span style="margin: 0 20px">|</span>
            <span>  
                粤  我是<a href="#">潮人</a>
            </span>
            <span style="margin: 0 20px">|</span>
            <span>
                邮箱 
                <a href="#">rj14108@163.com</a>
            </span>
        </div>
    </footer>
</body>
</html>
打开App，阅读手记
相关标签
Html5
Bootstrap
8人推荐
发表评论
随时随地看视频慕课网APP

热门评论

我是路过的，留个脚印

不错，代码详细，学习了一下。

查看全部评论

相关课程

Spring Boot+Vue3前后端分离，实战wiki知识库系统

¥299 中级 2487

基于Vue3新标准，打造后台综合解决方案

¥458 高级 1934

Java支付全家桶 企业级各类支付手段一站式解决方案

¥388 初级 746

H5+JS+CSS3 实现圣诞情缘

免费 中级 121971

HTML5+CSS3实现春节贺卡

免费 中级 110053