S_Mars的博客

小白进阶之路

系统分析Lesson5-Bootstrap学习报告

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>
四、 实现效果

资讯页面
视频卡片

阅读更多
个人分类: web
上一篇Windows10+Visual Studio2017环境下配置opengl+glew
下一篇系统分析与设计lesson6-用例图
想对作者说点什么? 我来说一句

信息系统分析与设计报告

2018年03月06日 5.53MB 下载

没有更多推荐了,返回首页

关闭
关闭