从零玩转Bootstrap+项目实战
2018-05-16 本文已影响1104人
撩课_叶建华
(一) 认识BootStrap
这是一个神奇的前端UI框架
- bootstrap是当下非常经典且流行的前端框架（界面工具集); 很多公司的前后端项目都有集成boostrap!
- bootstrap的特点: 灵活简介、代码优雅、美观大方；用一句话概括: 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
- GitHub: https://github.com/twbs/bootstrap
- 官网:
- http://www.bootcss.com/ (中文网)
- https://getbootstrap.com/ (英文网)
Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的一个内部开源项目，并利用业余时间完成了第一个版本的开发。
(二) 为什么要使用BootStrap
- Bootstrap提供了一整套前后端(包括移动端)需要的界面工具集合, 能够让开发者快速搭建出美观的, 可适配的前端界面!
- 生态圈火，不断地更新迭代；并且基于bootstrap衍生出来了很多其它的前端框架, 比如: 各种什么UI(你懂得, 老祖宗在这!);
- 提供一套美观大方地界面组件；
- 提供一套优雅的 HTML+CSS 编码规范；
- ......
注意:
使用 Bootstrap 并不代表不用写 CSS 样式, JS代码，而是不用写所有通用的代码!
(三) 开始使用BootStrap
-
下载安装Bootstrap
- 方式一: npm install bootstrap --save
(通过 npm 进行安装, 适合工程化开发, 比如集成到react或者Node项目中) - 方式二: gitHub直接下载
(适合起步, 全面学习)
- 方式一: npm install bootstrap --save
-
Bootstrap初始化模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
<!-- 引入Bootstrap核心样式文件（必须） -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 引入Bootstrap默认主题样式（可选） -->
<link rel="stylesheet" href="css/bootstrap.theme.min.css">
<!-- 你自己的样式或其他文件 -->
<link rel="stylesheet" href="example.css">
</head>
<body>
<!-- 你的HTML结构...... -->
<!-- 以下代码，如果不使用JS插件则不需要 -->
<!-- 由于Bootstrap的JS插件依赖jQuery，so 引入jQuery -->
<script src="js/jquery.min.js"></script>
<!-- 引入所有的Bootstrap的JS插件 -->
<script src="bootstrap.min.js"></script>
<!-- 你自己的脚本文件 -->
<script src="example.js"></script>
</body>
</html>
(四) 前端界面常用组件
(无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能)
- 按钮
<button class="btn btn-danger test">百度一下</button>
<button class="btn btn-warning">谷歌一下</button>
<button class="btn btn-success">搜狗一下</button>
- 进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
- 徽章
<p class="badge" style="background-color: red;">10121212121</p>
- 面板
<div class="panel panel-default" style="margin: 100px;">
<header class="panel-heading">
通知：有大事要发生!
</header>
<section class="panel-body">
<p>我不小心摔倒了！</p>
</section>
<footer class="panel-footer">
来源: www.itlike.com
</footer>
</div>
- 字体图标
<span class="glyphicon glyphicon-trash" style="font-size: 100px; color: red"></span>
<p class="glyphicon glyphicon-qrcode" style="font-size: 100px; color: blue;"></p>
(五) Bootstrap案例实战 - 高仿撩课学院官网
- 案例目的: 学习boostrap中组件的搭配使用, 并进行定制开发
- 案例级别: 入门即会
- 案例效果: www.itlike.com/demo
- 案例视频(共50个课时)和源码下载:
扫码进入, 点击"资料下载"
