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表示额外的小
- 首先,设定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的区别:
<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