欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

FCC学习笔记-(二) Responsive Design with Bootstrap

程序员文章站 2022-04-24 21:52:59
...

(二) Responsive Design with Bootstrap

Bootstrap

  • Responsive Design
    bootstrap是一款受欢迎的响应式CSS框架,它能计算屏幕的宽度,而且通过调整HTML元素的尺寸进行响应,因此称为响应式设计。应用响应式设计,无需为移动端单独设计网站。

  • add bootstrap
    在HTML顶部增加以下代码:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
  • 嵌套 container-fluid
<div class="container-fluid>
...
</div>

自动响应图像

  • img-responsive
    把图像用合适的尺寸展示
<img src="https://bit.ly/fcc-running-cats" class=
"img-responsive">

文字居中

  • text-center属性
<h2 class="red-text text-center">your text</h2>

Bootstrap 按钮

  • 创建按钮: btn
<button class="btn">Like</buttom>
  • 创建Block Bootstrap元素的按钮: btn-block
<button class="btn btn-block">Like</buttom>
  • 高亮按钮: btn-primary
<button class="btn btn-clock btn-primary">Like</buttom>
  • 另一种颜色的高亮按钮:bin-info
<button class="btn btn-clock btn-info">Info</buttom>
  • 红色高亮按钮,用于警告用户: bin-danger
<button class="btn btn-clock btn-danger">Delete</bu

Bootstrap Grid(网格)

  • 大多数的bootstrap的类都可以应用于div元素
  • 12-columns的grid布局
    col-mid-* , md代表居中,*代表元素指定的column数
    col-xs-* ,xs表示额外的小
    FCC学习笔记-(二) Responsive Design with Bootstrap
  • 首先,设定div,类属性为row
<div class="row">
  • 其次,对每一一个button,设定
<div class="col-xs-4">

 <div class="row">
    <div class="col-xs-4">
  <button class="btn btn-block btn-primary">Like</button>
    </div>
    <div class="col-xs-4">
  <button class="btn btn-block btn-info">Info</button>
    </div>
    <div class="col-xs-4">
  <button class="btn btn-block btn-danger">Delete</button>
    </div>
  </div>

Span

  • 创建inlines element
    span可以把多个元素,甚至相同元素的不同部分定义为不同的style

  • nilines elements 和 block-level的区别:

    FCC学习笔记-(二) Responsive Design with Bootstrap

<p>Three things cat<span class="text-dager">hate:</span></p>

自定义标题

  • 与boostrap grid类似,利用网格,将标题与图像置于同一行
<div class="row">
<div class="col-xs-4">
<div class="row">
    <div class="col-xs-8">
  <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <div class="col-xs-4">
  <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "></a>
    </div>
</div>

给按钮增加图标

  • HTML顶部增加代码:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
  • Font Awesome是一个非常便利的图标库
<i class="fa fa-info-circle"></i>
  • 在button中嵌套代码:
   <button class="btn btn-block btn-primary"><i class="
   fa fa-thumbs-up"></i>Like</button>

Responsively Style选择按钮

  • 利用boostrap grid
    单选按钮 radio button:
<div class="row">
      <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
      <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Loving</label>

多选按钮 checkbox:

<div class="row">
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label>
      </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label>
      </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
    </div>

Create Bootstrap Wells

  • well 类创造了一种可视化的深度感
div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
      </div>

    </div>
    <div class="col-xs-6">
      <div class="well">
        </div>

    </div>
  </div>
</div>

Target

  • 用于Jquery