bootstrap学习记录

小技巧

• 如果是input标签，则一般放在label标签内
• checkbox表示多选框，radio表示单选框

基本知识

• container-fluid和container是bootstrap中的两种不同类型的外层容器，
  .container属性用于固定宽度并支持响应式布局的容器
  _.container-fluid属性用于100%宽度，占据全部视口的容器
• bootsrap中有一个class属性交租well，它的作用是为设定的列创造出一种视觉上的深度感

按钮

• btn属性：凡是按钮均需要添加btn属性
• btn-block属性：表示该按钮为块级元素
• btn-primary属性：表示该按钮的颜色为应用的主要颜色
• btn-info属性：添加了该属性的按钮颜色为浅蓝色，表示用户可能会采取的操作
• btn-danger属性：红色按钮，表示该操作具有“破坏性”。
• btn-default属性：按钮默认属性

bootstrap的响应式网格布局

在bootstrap中对四种屏幕宽度进行媒体查询，

/* 超小屏幕（手机，小于 768px） /
/ 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） /
/ 小屏幕（平板，大于等于 768px） /
@media (min-width: @screen-sm-min) { ... }
/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: @screen-md-min) { ... }
/ 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

• 用途：可轻松实现将多个元素放入一行并指定各个元素的相对宽度的需求。
• 注意：bootstrap的网格一行默认是由12个小单元格组成,一行中的元素通过一个带有row属性的div元素包裹，其内部的子元素通过添加col-md-*来指定宽度，*表示数字，md表示该页面在中等屏幕的设备上显示，该值可以根据实际设备的屏幕大小调整

• 使用：实例：用于手机、平板、桌面

Paste_Image.png

代码如下：

  
.col-xs-12 .col-sm-6 .col-md-8
  
.col-xs-6 .col-md-4


  
.col-xs-6 .col-sm-4
  
.col-xs-6 .col-sm-4
  
  

  
.col-xs-6 .col-sm-4

以上代码中以column1为例说明：当为超小屏幕时，column-1占用12列，当为小屏幕时，column-1占用6列，当为中等屏幕时占用8列，这样便实现了根据屏幕的大小来调整宽度

Font Awesome 图标库

• 一般通过i标签添加，如为一个按钮添加一个图标：
  Like
• 图标类型
  删除意义的图标： 点赞意义的图标：
  提交意义的图标：

表单控件

• 输入框input：在bootstrap中使用input是也必须添加type类型，如果没有指定type类型，将无法得到正确的样式；同时，为了让控件在各种表单风格中样式不出错，需要添加类名"form-control"
  如：
• 下拉选择框select控件：
• 文本域textarea控件:

导航元素

• 表格导航菜单：
  
• 胶囊式导航：
  
• 垂直的胶囊导航：
  
• 两端对齐的导航：
  
  
  主要起作用的的是nav-justified类名
• 使导航菜单中的一个链接项禁用:hover状态，对该项添加disabled类
  
  
  
  • WEB
  
  
  • IOS
  
  
  • JAVA
  
  
  • Andrion
  
  
• 带有下拉菜单的胶囊
  

  导航下拉菜单：

  
  
  
  
  • HOME
  
  
  • JAVA
  
  
  • IOS
  
  
  • //该 li 标签是下拉菜单的实现
    
    WEB
    
    
    
    • HTML
    
    
    • CSS
    
    
    • JAVASCRIPT
    
    
    
    
    • JQUERY
    
    
    
    
  
  
  • ANDRION
  
  

导航栏

• 默认的导航栏
  创建一个默认的导航栏的步骤如下：

  1. 向
     标签添加 class.navbar、navbar-default属性，并添加 role="navigation，role属性有利于增加可访问性
  2. 向
     元素添加class.navbar-header，内部包含带有class.navbar-brand的a元素，会让文本看起来大一号
     代码如下：
     

     默认的导航栏

     
     

     
     

     
     

     
     Brand
     

     
     

     
     

     
     
     • IOS
     
     
     • SVN
     
     
     • 
       JAVA
       
       
       
       
       • jmeter
       
       
       • EJB
       
       
       • Jasper Report
       
       
       
       
       • 分离的链接
       
       
       
       
       • 另一个分离的链接
       
       
       
       
     
     

     
     

     
     

     
     

• 响应式的导航栏

  1. 为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有class.collapse、 .navbar-collapse的
     中
  2. 折叠起来的导航栏实际上是一个带有class.navbar-toggle以及两个data-元素的按钮
  3. 默认的导航与响应式导航主要在与1和2两点中
     代码如下：
     

     响应式的导航栏

     
     
     
     

     
     

     
     
     切换导航
     
     
     
     
     菜鸟教程
     

     
     

     
     

     
     
     • IOS
     
     
     • SVN
     
     
     • 
       
       Java
       
       
       
       
       • jmeter
       
       
       • EJB
       
       
       • Jasper Report
       
       
       
       
       • 分离的链接
       
       
       
       
       • 另一个分离的链接
       
       
       
       
     
     

     
     

     
     

     
     

• bootstrap中的图标
  添加方法：
  

  
  
  • 注册
  
  
  • 登录
  
  
  1. 添加**class.glyphicon **， class.glyphicon-user和class.glyphicon-log-in表示需要使用ICON图标名，具体可以查看各个图标对应的类名，网址：bootstrap图标

• 导航栏的定位

  1. 将导航栏固定在顶部：给nav标签添加class.navbar-fixed-top

     注意：为了防止导航栏与页面主题中的其他内容的顶部相交错，请向标签添加至少50像素的内边距 （padding），内边距的值可以根据需要进行调整

  2. 将导航栏固定在底部：给nav标签添加class.navbar-fixed-bottom

  3. 使导航栏随着页面一起滚动：给nav标签添加.navbar-static-top，使用该class，不要求向添加内边距

• 倒置的导航栏
  创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单的向.navbar class添加.navbar-inverse class即可