Bootstrap常用笔记

Bootstrap是比较流行的响应式框架,它会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。
通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。

常用APIs

• 引入

...

• 通过Bootstrap使图片适配手机显示

  • 给图片添加 img-responsive class属性,图片的宽度就能完美地适配你的页面的宽度了。
  • ![](/images/running-cat.jpg)

• 通过Bootstrap使文本居中

  • 可以用空格和已有的class区别开

  • your text

• 通过Bootstrap添加一个按钮

  • Like
  • 样式的确和原生有些区别，看着更平滑一些

• 添加一个Bootstrap块级元素(block)按钮

  • 可以理解为匹配父容器的按钮
  • Like

• 尝试给一个Bootstrap按钮添加颜色

  • Bootstarp自身预定义了一些颜色
  • (深蓝色)Like
  • (浅蓝色)Info

• 添加一个Bootstrap警告按钮

  • 其实就是个红色按钮，也是预定义的颜色,名字叫danger
  • Delete

使用Bootstrap做页面布局

Bootstrap 使用一种响应式网格布局——可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。Bootstrap 中大多数的class属性都可以设置于 div 元素中。

下面这张图用的class属性是col-md-*，12列网格布局

• md是medium（中等），不是markdown
• *是数字,代表在一行中,各个元素应该占的列宽。

col-md使用

手机可以尝试col-xs-*

• xs 是 extra small的缩写（应用于较小的屏幕，比如手机屏幕）
• * 是你需要填写的数字,代表在一行中,各个元素应该占的列宽。

  

    
    
Like

    
Info

    
Delete
    
  

在按钮上使用Font Awesome图标字体

• 你可以在Font Awesome官网找到最新的和所有的icon或者其他的东西

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

• 引入

• i在原生中是斜体，在这里是icon

• 用法（在上面官网链接进去找你需要的）

  • 官网上的名称是这样的icon-thumbs-up,你用的时候改成fa fa-thumbs-up，fa应该就是Font Awesome，我猜的

  
  Like
  //不一定包裹，也可以前缀
  Like    
  

• 使用Bootstrap span标签来创建行内元素

  • span标签可以用来做行内元素
  • 通过span 可以把几个元素放在一起

  Hello World!
  //这时候World！应该是红色的
   Hello  World!
  

• 使用Bootstrap设计一个头部导航

  
  
  ![](/statics/codecamp/images/relaxing-cat.jpg)
    
  CatPhotoApp
  
  
  

• 使用Bootstrap 响应式单选按钮

  • 将 Bootstrap 的 col-xs-*用在 form 元素中。这样的话，我们的单选按钮就可以均匀地在页面上展开，不需要知道屏幕的分辨率有多宽。

  
      
  
          
   Indoor
          
   Outdoor
      
  
  

• 使用Bootstrap 响应式复选框

  
      
   Loving
      
   Lazy
      
   Crazy
  
  

• 使用Form Controls设置输入框和按钮样式

  
  
  Submit
  
  

• 使用Bootstrap水平排列的表单

  • 这个没啥说的，和之前一样的就行了

    
  
  
   Submit
  
  

• 使用Bootstrap设置div容器

  • 响应式容器

    • ...

  • 行容器

    • ...

  • 分割Bootstrap行容器

    
        
    ...
        
    ...
    `
    

• Bootstrap well容器

  • Bootstrap 有一个 class 属性叫做 well

  • 作用是为设定的列创造出一种视觉上的深度感

    • ...

  • 在Bootstrap well容器中加按钮

    //默认样式
    
        
    
    

• Bootstrap元素的ID属性

  • 并不是每一个 class 属性都是用于 CSS 的。 有些时候我们创建一些 class 只是为了更方便地在jQuery中选中这些元素。
  • 每个元素的id是唯一的。
  • 添加id和添加class一样
    • ...

• 使用注释标签说明代码

  • 这个其实可以忽略的，有过编码经验的人都知道,但是作为初学者还是要提醒一下的，嗯，就酱紫！
  • HTML,XML ``
  • JS //