bootstrap快速入门_学习笔记

首页免费课 bootstrap快速入门笔记

bootstrap快速入门

                
                袁三日
            Web前端工程师

                    查看讲师更多课程 
                    袁三日讲师的其他课程
                
css定位 position
初级·49044
免费课程
                                
                难度中级
            
                时长 2小时 5分
            
                学习人数
            
综合评分9.37
                            179人评价
                        查看评价
                                9.6
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.1
                                逻辑清晰

最热最新

jetaime_dml

手机和Pad适配

查看全部

0 采集收起来源：viewport
2018-05-19
qq_蓝色飞扬_0 04:07

单位元素rem

查看全部

0 采集收起来源：单位
2018-05-17
ren_rs

引用bookstrap样式：<link rel="stylesheet" href="css/bookstrap.min.css">

查看全部

0 采集收起来源：图标
2018-05-15
小重山山232673

<nav>
<ul class="pager">
<li class="previous"><a href="#">前一个</a><li>
<li class="next"><a href="#">后一个</a><li>
</ul>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<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>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>

查看全部

0 采集收起来源：分页
2018-05-14
菜鸟Wenco

jquery版本要高于1.9

查看全部

0 采集收起来源：bootstrap环境搭建
2018-05-12
小重山山232673
<div class="input-group input-group-lg">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
查看全部

0 采集收起来源：控件组
2018-05-11
小重山山232673
<div class="dropdown">
<button class="btn btn-default btn-danger dropdown-toggle" data-toggle="dropdown">菜单项<span class="caret"></span></button>
<ul class="dropdown-menu">
<li class=""><a href="www.baidu.com">百度</a></li>
<li class=""><a href="www.baidu.com">百度</a></li>
<li class=""><a href="www.baidu.com">百度</a></li>
<li class=""><a href="www.baidu.com">百度</a></li>
</ul>
</div>
查看全部

1 采集收起来源：控件组
2018-05-11

隔壁老王的弟子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mooc网学习</title>
    <link href="css/bootstrap-theme.min.css"rel="stylesheet">
    <link href="css/bootstrap.min.css"rel="stylesheet">

</head>
<body>
<div class="panel panel-primary">
    <div class="panel-heading">
        弹出层
    </div>
    <div class="panel-body">
        这是面板的内容
    </div>
    <div class="panel-footer">
        脚注
    </div>
</div>

<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

查看全部

0 采集收起来源：面板

2018-05-09

隔壁老王的弟子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mooc网学习</title>
    <link href="css/bootstrap-theme.min.css"rel="stylesheet">
    <link href="css/bootstrap.min.css"rel="stylesheet">

</head>
<body>
<ul class="list-group">
    <li class="list-group-item active">这是一个列表<span class="badge">14</span> </li>
    <li class="list-group-item">这是一个列表<span class="badge">14</span> </li>
    <li class="list-group-item">这是一个列表<span class="badge">14</span> </li>
    <li class="list-group-item">这是一个列表<span class="badge">14</span> </li>
</ul>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

查看全部

0 采集收起来源：列表

2018-05-09

隔壁老王的弟子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mooc网学习</title>
    <link href="css/bootstrap-theme.min.css"rel="stylesheet">
    <link href="css/bootstrap.min.css"rel="stylesheet">

</head>
<body>
<div class="progress">
    <div class="progress-bar progress-bar-info" >你好明天</div>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

查看全部

0 采集收起来源：进度条

2018-05-08

隔壁老王的弟子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mooc网学习</title>
    <link href="css/bootstrap-theme.min.css"rel="stylesheet">
    <link href="css/bootstrap.min.css"rel="stylesheet">

</head>
<body>
<nav>
    <ul class="pager">
        <li class="next"><a href="http://www.baidu.com">向左</a> </li>
        <li class="previous"><a href="http://www.baidu.com">向右</a> </li>
    </ul>
    <ul class="pagination pagination-lg">
        <li class="active"><a href="http://www.baidu.com">1</a> </li>
        <li><a href="http://www.baidu.com">2</a> </li>
        <li><a href="http://www.baidu.com">3</a> </li>
        <li><a href="http://www.baidu.com">4</a> </li>
        <li><a href="http://www.baidu.com">5</a> </li>
    </ul>
</nav>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

查看全部

0 采集收起来源：分页

2018-05-08

隔壁老王的弟子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mooc网学习</title>
    <link href="css/bootstrap-theme.min.css"rel="stylesheet">
    <link href="css/bootstrap.min.css"rel="stylesheet">

</head>
<body>
<ul class="nav nav-tabs">
    <li class="active"><a href="http://www.baidu.com">慕课网</a> </li>
    <li><a href="http://www.baidu.com">慕课网</a> </li>
    <li><a href="http://www.baidu.com">慕课网</a> </li>
</ul>
<ul class="nav nav-pills">
    <li class="active"><a href="http://www.baidu.com">慕课网</a> </li>
    <li><a href="http://www.baidu.com">慕课网</a> </li>
    <li><a href="http://www.baidu.com">慕课网</a> </li>
</ul>
<ul class="nav nav-pills nav-stacked">
    <li class="active"><a href="http://www.baidu.com">慕课网</a> </li>
    <li><a href="http://www.baidu.com">慕课网</a> </li>
    <li><a href="http://www.baidu.com">慕课网</a> </li>
</ul>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

查看全部

0 采集收起来源：导航

2018-05-08

隔壁老王的弟子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mooc网学习</title>
    <link href="css/bootstrap-theme.min.css"rel="stylesheet">
    <link href="css/bootstrap.min.css"rel="stylesheet">

</head>
<body>
    <div class="input-group">
        <span class="input-group-addon">$</span>
        <input type="text"class="form-control">
    </div>
</body>
</html>

查看全部

0 采集收起来源：控件组

2018-05-08

隔壁老王的弟子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="201658254038徐梓洲(Boostrap)/css/bootstrap.min.css"rel="stylesheet"/>
    <link href="201658254038徐梓洲(Boostrap)/css/bootstrap-theme.css" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
</head>

<body>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle "data-toggle="dropdown">这是按钮
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
        <li>你好</li>
            <li>
                <a href="http://www.baidu.com">你好</a> </li>
            <li>你好</li>
        </ul>
    </div>
</body>

</html>

查看全部

0 采集收起来源：下拉菜单

2018-05-06

隔壁老王的弟子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link href="201658254038徐梓洲(Boostrap)/css/bootstrap.min.css"rel="stylesheet"/>
    <link href="201658254038徐梓洲(Boostrap)/css/bootstrap-theme.css" rel="stylesheet"/>
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    .glyphicon-asterisk{
        color: #02a6e3;
        font-size: 100px;
    }
    </style>
</head>

<body>
<button class="btn btn-danger">
    <span class="glyphicon glyphicon-asterisk"></span>这是一个按钮</button>
</body>

</html>

查看全部

1 采集收起来源：字体图标

2018-05-06

首页上一页 18 19 20 21 22 23 24 下一页尾页

0/150

提交

取消

开始学习

课程须知: 本教程适合具有一定前端基础的人员，对HTML、CSS、JavaScript有一定的了解。

老师告诉你能学到什么？: （1）如何快速搭建网页（2）如何使用组件开发（3）使用bootstrap插件实现网页的开发

微信扫码，参与3人拼团

热搜

最近搜索清空

bootstrap快速入门