为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap快速入门

难度中级
时长 2小时 5分
学习人数
综合评分9.37
179人评价 查看评价
9.6 内容实用
9.4 简洁易懂
9.1 逻辑清晰
为什么老师打错那么多,依然可以运行?软件可以自动校正?
<div class="progress"><!-- 渐变色 -->
<div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 100%;">
100%
</div>
<head>
<link rel="stylesheet" href="dist\css\bootstrap.min.css">
</head>
<body>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
</body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 按钮
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="http://www.imooc.com">慕课网</a></li>
</ul>
</div>
<head>
<link rel="stylesheet" href="dist\css\bootstrap.min.css">
<script src="jqurey/jquery-3.2.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</head>
https://code.jquery.com/jquery-3.2.1.min.js jquery-3.2.1.min.js 下载地址
<head>
<link rel="stylesheet" href="dist\css\bootstrap.min.css">
</head>
<body>
<button>
<span class="glyphicon glyphicon-star"></span>
按钮
</button>
</body>
1. glyphicon glyphicon-asterisk
2. glyphicon glyphicon-plus
3. glyphicon glyphicon-euro
4. glyphicon glyphicon-eur
5. glyphicon glyphicon-minus
6. glyphicon glyphicon-cloud
7. glyphicon glyphicon-envelope
8. glyphicon glyphicon-pencil
9. glyphicon glyphicon-glass
<style>
.tb1{color: blue;font-size: 10em;}
.tb2{color: red;font-size: 13rem;}
</style>
<body>
<span class="glyphicon glyphicon-asterisk tb1"></span>
<span class="glyphicon glyphicon-heart tb2"></span>
</body>
<head>
<link rel="stylesheet" href="dist\css\bootstrap.min.css">
<style>
.test{height: 300px;background: red;}
</style>
</head>
<body>
<div class="test col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3 col-md-offset-4"></div>
</body>
<style>
.test{width:300px;height: 200px;background: red;}
@media screen and (max-width: 900px) and (min-width: 500px){
.test{width: 100%;height: 100px;background: blue;}
</style>

<body>
<div class="test"></div>
</body>
bootstarp有用的就是栅格系统做响应式布局的快速开发,其他定义的样式感觉没用,很多样式都是UI设计的还得用CSS改
<button class="btn btn-info">按钮</button>
<button class="btn btn-link">按钮</button>
<a href="" class="btn btn-danger">按钮</a>
<button class="btn btn-default btn-lg">按钮</button>
<button class="btn btn-success active">按钮</button>
<button class="btn btn-primary btn-block">按钮</button>
<button class="btn btn-warning" disabled="disabled">按钮</button>
<button class="btn btn-danger">按钮</button>
现在慕课网的视频变得一卡一卡的,不知道大家发现没有,还是就我的电脑这样。
课程须知
本教程适合具有一定前端基础的人员,对HTML、CSS、JavaScript有一定的了解。
老师告诉你能学到什么?
(1)如何快速搭建网页 (2)如何使用组件开发 (3)使用bootstrap插件实现网页的开发

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消