Use Responsive Design with Bootstrap Fluid Containers
流行的响应式框架Bootstrap
- Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调响应式设计的概念。
- 通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。
- 你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
Make Images Mobile Responsive
- 通过Bootstrap，我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。
Center Text with Bootstrap
- 可以通过居中头部元素来使它看起来更棒。 我们所要做的只是给元素添加text-center class属性
Create a Bootstrap Button
- Bootstrap有它自己的 button 按钮风格， 看起来要比默认的按钮好看得多。只要给button添加btn系列的class属性
Create a Block Element Bootstrap Button
通常情况下，你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素，你的按钮将会伸展并填满页面整个水平空间，任何在它之下的元素都会跟着浮动至该区块的下一行。
行内元素与块级元素的区别
- 注意，这些按钮仍然需要 btn class。
Taste the Bootstrap Button Color Rainbow
- Bootstrap自带了一些预定义的按钮颜色。
- 深蓝色btn-primary是你的应用的主要颜色，被用在那些用户主要采取的操作上。
Call out Optional Actions with Button Info
- 浅蓝色 btn-info 被用在那些用户可能会采取的操作上。
Warn your Users of a Dangerous Action
- 红色btn-danger被用来提醒用户该操作具有“破坏性”，例如删除一张猫的图片。
Use the Bootstrap Grid to Put Elements Side By Side
Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。
Bootstraps 的12列网格布局是如何起作用的
- 在这张图表中，class属性 col-md-** 正被使用。在这里，md 表示 medium (中等的)，* *代表一个数字，它指定了这个元素所占的列宽。通过此图表的属性设置可知，在中等大小的屏幕上(例如笔记本电脑)，元素的列宽被指定了。
- 在我们创建的 Cat Photo App 中，将会使用 col-xs-** ，其中 xs 是 extra small 缩写（应用于较小的屏幕，比如手机屏幕），* * 是你需要填写的数字，代表在一行中,各个元素应该占的列宽。
- 当div 元素设置了 class 属性 row 之后，那几个按钮便可嵌入其中。
Use Spans for Inline Elements
- 可以用 span 标签来创建行内元素。
inline 元素与 block-level 块级元素的区别
通过使用 span 元素，你可以把几个元素放在一起。你甚至可以用此为一个元素的不同部分指定样式。
Create a Custom Heading
导航
- Bootstrap使用响应式栅格系统，这使得把元素放入行内并为每个元素指定宽度变得很容易。大部分的 Bootstrap的 class 都可以被用在 div 元素上。
- 将图片和元素放在同一个
<div class="row">元素下,再指定元素宽度应该占用的栏数，就可以放在同一行，实现导航条了。
Add Font Awesome Icons to all of our Buttons
Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形，被保存在 .svg 的文件格式中。这些图标就和字体一样，你可以通过像素单位指定它们的大小，它们将会继承其父HTML元素的字体大小。
你可以将 Font Awesome 图标库增添至任何一个应用中，方法很简单，只需要在你的 HTML 头部增加下列代码即可：
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
- i 元素起初一般是让其它元素有斜体(italic)的功能，不过现在一般用来指代图标。你可以将 Font Awesome 中的 class 属性添加到 i 元素中，把它变成一个图标，比如：
<i class="fa fa-info-circle"></i>
Responsively Style Radio Buttons And Checkboxes
- 还可以将 Bootstrap 的 col-xs-*用在 form 元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽。
Line up Form Elements Responsively with Bootstrap
- 把 input 元素和提交按钮 button 放到同一行。我们将用和之前一样的方法：通过使用拥有 row class 属性的 div 元素和其它在它之内的具有 col-xs-* class 属性的 div 元素。
Create a Bootstrap Headline
- text-primary 使文本颜色为深蓝色
- text-center 使文本居中显示
House our page within a Bootstrap Container Fluid Div
- 为了确保页面里所有的内容都是响应式的，将 所有元素放置于一个class属性为 container-fluid 的 div 元素中。
Create a Bootstrap Row
<div class="row"></div>
Split your Bootstrap Row
- 分栏来放置元素
<div class="col-xs-*"></div>
Create Bootstrap Wells
- Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感
<div class="well"></div>
Apply the Default Bootstrap Button Style
- Bootstrap 还有一种属于按钮的 class 属性叫做 btn-default 。
<button class="btn btn-default"></button>
Create a Class to Target with jQuery Selectors
- 并不是每一个 class 属性都是用于 CSS 的。 有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。
为 button 添加 target:
<button class="btn btn-default target"></button>
网友评论