使用Bootstrap制作自适应个人信息页/How to use Bootstrap to make Responsive Profile Page

in utopian-io •  7 years ago  (edited)

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 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。

您将从这个教程中学到什么

  • 如何设计页面布局
  • 如何创建文件&调用样式文件
  • 如何根据页面布局制作页面

学习此教程的必备条件

教程难度

  • 简单

教程内容

演示效果
demo.gif

1. 知识点A - 如何设计页面布局
未命名-1.gif
我们首先设计页面布局，由于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">[email protected]</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;}

以上代码内容，是实现页面效果的关键代码，有兴趣的可以尝试自己动手试一试，也欢迎与我交流，互相学习，一起进步。

最终效果
demo.gif

系列教程

如果您喜欢我的教程，可以在我的个人档案页面，获取更多信息。
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

utopian-io zqz-tutorial
7 years ago by

Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

  • Disagreement on rewards
  • Fraud or plagiarism
  • Hate speech or trolling
  • Miscategorized content or spam

Submit
$21.75
  • Past Payouts $21.75
  • - Author $15.16
  • - Curators $6.59
13 votes
5
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Trending
    • [-]
      ·  7 years ago 

    Thank you for the contribution. It has been approved.

    You can contact us on Discord.
    [utopian-moderator]

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.22
    • Past Payouts $0.22
    • - Author $0.22
    • - Curators $0.00
    1 vote
    [-]
      ·  7 years ago 

    Copied from somewhere. They use an old date in the code.

    You can contact us on Discord.
    [utopian-moderator]

    Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

    • Disagreement on rewards
    • Fraud or plagiarism
    • Hate speech or trolling
    • Miscategorized content or spam

    Submit
    $0.00
      [-]
        ·  7 years ago 

      I need a bit of clearance. I’ll contact you on discord

      Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

      • Disagreement on rewards
      • Fraud or plagiarism
      • Hate speech or trolling
      • Miscategorized content or spam

      Submit
      $0.00
        [-]
          ·  7 years ago 

        The value of the "出生年月" field is a test value, not real data, just like the 联系电话 & 电子邮件 fields are not real data.

        Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

        • Disagreement on rewards
        • Fraud or plagiarism
        • Hate speech or trolling
        • Miscategorized content or spam

        Submit
        $0.00
          [-]
            ·  7 years ago 

          Hey @hui.zhao I am @utopian-io. I have just upvoted you!

          Achievements

          • You have less than 500 followers. Just gave you a gift to help you succeed!
          • Seems like you contribute quite often. AMAZING!

          Suggestions

          • Contribute more often to get higher and higher rewards. I wish to see you often!
          • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

          Get Noticed!

          • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

          Community-Driven Witness!

          I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

          mooncryption-utopian-witness-gif

          Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

          Downvoting a post can decrease pending rewards and make it less visible. Common reasons:

          • Disagreement on rewards
          • Fraud or plagiarism
          • Hate speech or trolling
          • Miscategorized content or spam

          Submit
          $0.00