系统分析Lesson5-Bootstrap学习报告

原创 2018年04月15日 22:25:42

Boostrap4框架使用

使用指南及下载地址(最新):Boostrap4.1.0 download

本周学习内容:利用Boostrap4框架写静态网页

一、布局Layout
  1. container
    固定宽度
<div class="container">
  <!-- Content here -->
</div>
  1. container-fluid
    宽度为100%
<div class="container-fluid">
  ...
</div>
  1. Grid System
二、重要组件
  • 卡片(Card)
    Image overlays
<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>
  • 按钮(button)
<button type="button" class="btn btn-primary">Primary</button>
  • 轮播(carousel)
<div class="carousel-item">
  <img src="..." alt="...">
  <div class="carousel-caption d-none d-md-block">
    <h5>...</h5>
    <p>...</p>
  </div>
</div>
  • 下拉框 (dropdown)
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
  • 模态框(Modal)
<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
  • 导航栏 (Navbar)
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
三、 关键实现

登录下拉框

 <div class="dropdown user-info">
     <div class="dropdown-toggle user-avatar " data-toggle="dropdown"  id="dropdownMenu2">
         <img src="img/1.jpg" class="rounded-circle user-portrait">
         <span class="caret"></span>
      </div>
     <ul class="user-menu dropdown-menu" aria-labelledby="dropdownMenu2">
           <li class="dropdown-item"><a  href="javascript:void 0">登录</a></li>
      </ul>
</div>

单个卡片

<div class="latest-news-box">
    <a class="latest-news-anchor" href="#" target="_blank" data-act="news-click">
        <img class="latest-news-img" src="img/2.jpg"  alt="news image">
    </a>
    <div class="latest-news-box-detail">
        <a  class="latest-news-title " href="#" title="" target="_blank" data-act="news-click">
             <p class="two-line-text text-center"> 《动物世界》举行发布会,李易峰骑摩托炫酷登场,与粉丝玩猜拳</p>
        </a>
        <article class="three-line-text latest-news-article">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</article>
     </div>
     <div class="latest-news-info">
            <small class="update-time text-muted float-left">Last updated 3 mins ago</small>
            <small class="view-count float-right"><span class="fa fa-eye fa-lg"></span>200</small>
    </div>
</div>
四、 实现效果

资讯页面
视频卡片

系统分析与设计--学习笔记1

一.简答题 1. 定义“软件工程”:(1)将系统化、规范化、可度量的方法应用于软件的开发、运行与维护的过程中,即将工程化应用于软件中--采用工程的技术原理来开发和维护软件,把各种证明正确或有用的方法...
  • qq_24495217
  • qq_24495217
  • 2017-06-05 15:44:21
  • 304

华电电力系统分析笔记

  • 2011年12月05日 10:10
  • 3.28MB
  • 下载

人事管理系统分析报告

  • 2009年12月15日 17:48
  • 297KB
  • 下载

信息系统分析与设计报告

  • 2018年03月06日 21:46
  • 5.53MB
  • 下载

系统分析实验报告范例(含总封面).doc

  • 2008年12月23日 00:11
  • 166KB
  • 下载

《信号与线性系统分析(第4版)教学指导书》-与吴大正教材配套

  • 2012年11月07日 12:48
  • 11.08MB
  • 下载

B2c电子商务网站系统分析报告

  • 2010年12月15日 21:04
  • 75KB
  • 下载

系统分析报告模板

1. 简介 [软件需求规约 (SRS) 的简介应提供整个文档的概述。它应包括软件需求规约的目的、范围、定义、首字母缩写词、缩略语、参考资料和概述。] [注:软件需求规约完整地记录对系统或系统一部分的所...
  • lewislau
  • lewislau
  • 2005-06-04 16:48:00
  • 4424

系统分析与设计 研究性学习报告7300余字

  • 2010年11月20日 20:08
  • 204KB
  • 下载

MAS测量系统分析培训资料

  • 2015年06月05日 10:21
  • 1.3MB
  • 下载
收藏助手
不良信息举报
您举报文章:系统分析Lesson5-Bootstrap学习报告
举报原因:
原因补充:

(最多只允许输入30个字)