Bootstrap笔记

Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.
With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.

Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。

通过响应式设计,你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。

引入 BootStrap


适配图片

通过Bootstrap,我们要做的只是给图片添加 img-responsive class属性。这样图片的宽度就能完美地适配你的页面的宽度了。

![](/images/running-cat.jpg)

适配文本

使用Bootstrap,使文本居中,使它看起来更棒。 我们所要做的只是把text-center class属性添加给 h2 元素。

your text

适配按钮

通常情况下,你的 button 元素仅与它所包含的文本一样宽。通过使其成为块级元素,你的按钮将会伸展并填满页面整个水平空间,任何在它之下的元素都会跟着浮动至该区块的下一行。


添加Bootstrap的 btn-primary class 属性到按钮标签上,使按钮高亮。


Bootstrap自带了一些预定义的按钮颜色。浅蓝色 btn-info 被用在那些用户可能会采取的操作上。


红色btn-danger被用来提醒用户该操作具有“破坏性”


适配网格布局

class row 行
class col-md-* (中等屏幕适配),col-xs-*(小屏适配)

  • 填数字

Font Awesome

Font Awesome 是一个非常方便的图标库。这些图标都是矢量图形,被保存在 .svg 的文件格式中。这些图标就和字体一样,你可以通过像素单位指定它们的大小,它们将会继承其父HTML元素的字体大小。

引入


给按钮添加一个icon

Bootstrap笔记_第1张图片
Paste_Image.png

你可能感兴趣的:(Bootstrap笔记)