Summary:
Build responsive, mobile-first projects on the web with the world's most popular front-end component library.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
您将从这个教程中学到什么
- 如何设计页面布局
- 如何创建文件&调用样式文件
- 如何根据页面布局制作页面
学习此教程的必备条件
教程难度
- 简单
教程内容
演示效果
1. 知识点A - 如何设计页面布局
我们首先设计页面布局，由于bootstrap拥有栅格系统，所以制作起来更加方便快捷。
2. 知识点B - 如何创建文件&调用样式文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<title>Profile</title>
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
~
</body>
</html>
本教程的基础，是基于bootstrap构建，所以我们在页面部分使用对样式文件进行引用。
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
这句代码很重要，确保在手机版浏览器能否正常显示页面效果。
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
使用link引入对应的css。
3. 知识点C - 如何根据页面布局制作页面
本页面由5部分组成，下面我将对5部分代码进行分解。
A部分内容分解
<div class="col-md-5">
<div class="profileinfoleft">
<h3 class="username">
朝晖
</h3>
<small class="textmuted">
IT工程师
</small>
</div>
</div>
此部分定义姓名与职位信息。
- col-md-5：定义栅格系统样式。
- username：定义用户名样式。
- textmuted：定义职位样式。
B部分内容分解
<div class="col-md-7">
<ul class="personalinfo">
<li>
<span class="title">联系电话:</span>
<span class="text">+86-130 130 13000</span>
</li>
<li>
<span class="title">电子邮件:</span>
<span class="text">demo@demo.com</span>
</li>
<li>
<span class="title">出生年月:</span>
<span class="text">2010-10-10</span>
</li>
<li>
<span class="title">地址信息:</span>
<span class="text">南京 紫金研创中心</span>
</li>
<li>
<span class="title">婚姻状况:</span>
<span class="text">已婚</span>
</li>
</ul>
</div>
- col-md-7：定义栅格系统样式。
- personalinfo：定义联系信息部分的样式。
.personalinfo li .title {color: #515365;float: left;font-weight: 500;margin-right: 30px;width: 30%;}
.personalinfo li .text {color: #888da8;display: block;overflow: hidden;}
.personalinfo li {margin-bottom: 10px;}
.personalinfo {list-style: none;margin-bottom: 0;padding: 0;}
C部分内容分解
<div class="col-md-3">
<div class="card-box">
<h3 class="cardtitle">技能</h3>
<div class="skills">
<span>IOS</span>
<span>Android</span>
<span>Html</span>
<span>CSS</span>
<span>Codignitor</span>
<span>Php</span>
<span>Javascript</span>
<span>Wordpress</span>
<span>Jquery</span>
</div>
</div>
</div>
- col-md-3：定义栅格系统样式。
- card-box：定义技能部分的样式。
.card-box {background-color: #fff;border: 1px solid #ededed;border-radius: 4px;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);margin-bottom: 30px;padding:20px;}
.skills > span {border: 1px solid #ccc;border-radius: 500px;display: block;margin-bottom: 10px;padding: 6px 12px;text-align: center;}
D部分内容分解
<div class="card-box">
<h3 class="cardtitle">
教育经历
</h3>
<div class="experiencebox">
<ul class="experiencelist">
<li>
<div class="experienceuser">
<div class="beforecircle">
</div>
</div>
<div class="experiencecontent">
<div class="timelinecontent">
<a href="#" class="name">
南京大学 - Nanjing University
</a>
<div>
数字媒体技术
</div>
<span class="time">
2000 - 2003
</span>
</div>
</div>
</li>
<li>
<div class="experienceuser">
<div class="beforecircle">
</div>
</div>
<div class="experiencecontent">
<div class="timelinecontent">
<a href="#" class="name">
南京大学 - Nanjing University
</a>
<div>
数字媒体技术
</div>
<span class="time">
2000 - 2003
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
- card-box：定义教育经历部分的样式。
.card-box {background-color: #fff;border: 1px solid #ededed;border-radius: 4px;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);margin-bottom: 30px;padding:20px;}
.experiencebox {position: relative;}
.experiencelist > li .experienceuser {background: #fff;height: 10px;left: 4px;margin: 0;padding: 0;position: absolute;top: 4px;width: 10px;}
.experiencelist > li:last-child .experiencecontent {margin-bottom:0;}
.experiencelist > li .experiencecontent {background-color: #fff;margin: 0 0 20px 40px;padding: 0;position: relative;}
.experiencelist > li .experiencecontent .timelinecontent {color: #9e9e9e;}
.experiencelist > li .experiencecontent .timelinecontent a.name {color: #616161;font-weight: bold;}
E部分内容分解
<div class="card-box ">
<h3 class="cardtitle">
工作经验
</h3>
<div class="experiencebox">
<ul class="experiencelist">
<li>
<div class="experienceuser">
<div class="beforecircle">
</div>
</div>
<div class="experiencecontent">
<div class="timelinecontent">
<a href="#" class="name">
苏宁电器 - Suning Appliance
</a>
<span class="time">
2013年1月 - 2015年1月
</span>
</div>
</div>
</li>
<li>
<div class="experienceuser">
<div class="beforecircle">
</div>
</div>
<div class="experiencecontent">
<div class="timelinecontent">
<a href="#" class="name">
苏宁电器 - Suning Appliance
</a>
<span class="time">
2013年1月 - 2015年1月
</span>
</div>
</div>
</li>
<li>
<div class="experienceuser">
<div class="beforecircle">
</div>
</div>
<div class="experiencecontent">
<div class="timelinecontent">
<a href="#" class="name">
苏宁电器 - Suning Appliance
</a>
<span class="time">
2013年1月 - 2015年1月
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
- card-box：定义教育经历部分的样式。
.card-box {background-color: #fff;border: 1px solid #ededed;border-radius: 4px;box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);margin-bottom: 30px;padding:20px;}
.experiencebox {position: relative;}
.experiencelist > li .experienceuser {background: #fff;height: 10px;left: 4px;margin: 0;padding: 0;position: absolute;top: 4px;width: 10px;}
.experiencelist > li:last-child .experiencecontent {margin-bottom:0;}
.experiencelist > li .experiencecontent {background-color: #fff;margin: 0 0 20px 40px;padding: 0;position: relative;}
.experiencelist > li .experiencecontent .timelinecontent {color: #9e9e9e;}
.experiencelist > li .experiencecontent .timelinecontent a.name {color: #616161;font-weight: bold;}
以上代码内容，是实现页面效果的关键代码，有兴趣的可以尝试自己动手试一试，也欢迎与我交流，互相学习，一起进步。
最终效果
系列教程
如果您喜欢我的教程，可以在我的个人档案页面，获取更多信息。
If you like my tutorial , You can check out your profile for more such tutorials.
您可以使用zqz-tutorial标签快速查看我发布的所有教程
You can use the "zqz-tutorial" tag to see all the tutorials I've posted.
Posted on Utopian.io - Rewarding Open Source Contributors