bootstrap快速入门_学习笔记

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

bootstrap快速入门

                
                袁三日
            Web前端工程师

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

最热最新

隔壁老王的弟子

<!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>
    <span class="glyphicon glyphicon-asterisk"></span>
</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>
</head>

<body>
<button class="btn btn-primary active">这是一个按钮</button>
<button class="btn btn-default btn-block">这是一个按钮</button>
<button class="btn btn-danger">这是一个按钮</button>
<button class="btn btn-link">这是一个按钮</button>
<button class="btn btn-info disabled">这是一个按钮</button>
<a class="btn btn-primary active"href="#">则是一个a比钱</a>
</body>

</html>

查看全部

0 采集收起来源：Bootsteap中的表单(2)

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>
</head>

<body>
<form class="form-inline">
<div class="form-group">
<label for="">这是一个输入框:</label>
<input type="text" placeholder="这是一个输入框"class="form-control">
</div>
    <div class="form-group has-warning">
        <label for="">这是一个输入框:</label>
       <select class="form-control" name=""id="">
           <option value="">背景</option>
           <option value="">djfhdj</option>
           <option value="">djfdfg</option>
       </select>
    </div>
    <div class="form-group has-error">
        <label for="">这是一个输入框:</label>
        <textarea class="form-control " name="" id="" cols="30" rows="10"></textarea>
    </div>
</form>
</body>

</html>

查看全部

0 采集收起来源：Bootsteap中的表单(1)

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>
</head>

<body>

<table class="table table-striped table-bordered table-hover">

    <tr class="alert-danger">
        <td>biaoti</td>
        <td>biaoti</td>
        <td>biaoti</td>
    </tr>


    <tr class="alert-info">
        <td>biaoti</td>
        <td>biaoti</td>
        <td>biaoti</td>
    </tr>


    <tr class="alert-warning">
        <td>biaoti</td>
        <td>biaoti</td>
        <td>biaoti</td>
    </tr>

</table>
</body>

</html>

查看全部

0 采集收起来源：Bootstrap中的排版 - 表格

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 rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>

<body>
<p><mark>京东方刚接电话官方就好的</mark><del>打电话规范和低功耗</del><ins>束带结发对方好感的回复</ins>接电话防静电放得开阿道夫客户端高房价和第三个看风景行家对方水电费宫颈癌开会时都会否定</p>
<p>速度和法国红酒的看法噶大商股份集合的官方水电费关键是地方顾客收到货分割的撒谎发给接电话给谁看回复噶几速度和官方就好束带结发还是大法官嘉实多</p>
<p class="text-center">jhfjkdfkgdhfgdhfgdf</p>
<p class="text-right">独守空房给的开发的华国锋很多国家</p>
<p class="text-left">是经典款粉红色大规范化的加工费会感到</p>
</body>

</html>

查看全部

0 采集收起来源：Bootstrap中的排版 - 文本

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 rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>

<body>
<h1>biaoti<small>biaoti</small></h1>
<h2>biaoti</h2>
<h3>biaoti</h3>
<h4>biaoti</h4>
<h5>biaoti</h5>
<h6>biaoti</h6>
<span class="h1">biaoti</span>
<span class="h2">biaoti</span>

</body>

</html>

查看全部

0 采集收起来源：Bootstrap中的排版 - 标题

2018-05-06

johnhoo 00:14

Bootstrap特性

查看全部

0 采集收起来源：bootstrap环境搭建
2018-05-06
qq_感情废物_1 08:18

栅格参数的设置

查看全部

0 采集收起来源：栅格布局
2018-05-01
废弃加油站售货员

class="form-control" 组件加特效

查看全部

0 采集收起来源：Bootsteap中的表单(1)
2018-05-01
废弃加油站售货员

<div class="form-group"></div>
<form class="form-inline"></form> /*form里面的容器水平排列

查看全部

0 采集收起来源：Bootsteap中的表单(1)
2018-05-01
慕前端3094872

bootstrap是基于HTML、css、JavaScript的前端框架

查看全部

0 采集收起来源：课程介绍
2018-04-26
宝慕林6292338

<body>
<div class="panel panel-default">
<button type="button" class-="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >弹窗</button>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span><span class="sr-only">关闭弹窗</span></button>
<h4 class="modal-title" id="myModalLabel">标题</h4>
</div>
<div class="modal-body">慕课网</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</body>

查看全部

0 采集收起来源：Bootstrap中的插件（1）
2018-04-25
宝慕林6292338 00:17

面板

查看全部

0 采集收起来源：面板
2018-04-25
宝慕林6292338 03:13

striped-渐变效果

查看全部

0 采集收起来源：进度条
2018-04-25
宝慕林6292338 02:51

分页

查看全部

0 采集收起来源：分页
2018-04-25
宝慕林6292338 03:02

导航-胶囊导航-垂直导航

查看全部

0 采集收起来源：导航
2018-04-25

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

0/150

提交

取消

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

bootstrap快速入门