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

代码如下：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8 column-1">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4 column-2">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

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

Font Awesome 图标库

一般通过i标签添加，如为一个按钮添加一个图标：
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
图标类型
删除意义的图标： <i class = "fa fa-trash></i>"
点赞意义的图标： <i class = "fa fa-thumbs-up"></i>
提交意义的图标： <i class = "fa fa-paper-plane"></i>

表单控件

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

导航元素

表格导航菜单：
<ul class="nav nav-tabs"></ul>
胶囊式导航：
<ul class="nav nav-pills"></ul>
垂直的胶囊导航：
<ul class="nav nav-pills nav-stacked"></ul>
两端对齐的导航：
<ul class="nav nav-tabs nav-justified"></ul>
主要起作用的的是nav-justified类名
使导航菜单中的一个链接项禁用:hover状态，对该项添加disabled类
<ul class="nav nav-tabs">
<li><a href="#">WEB</a></li>
<li><a href="#">IOS</a></li>
<li class="disabled"><a href="#">JAVA</a></li>
<li><a href="#">Andrion</a></li>
</ul>
带有下拉菜单的胶囊
<h3>导航下拉菜单：</h3>
<ul class="nav nav-pills">
<li class = "active"><a href="#">HOME</a></li>
<li><a href="#">JAVA</a></li>
<li><a href="#">IOS</a></li>
<li class="dropdown"> //该 li 标签是下拉菜单的实现
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
WEB <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVASCRIPT</a></li>
<li class="divider"></li>
<li><a href="#">JQUERY</a></li>
</ul>
</li>
<li><a href="#">ANDRION</a></li>
</ul>

导航栏

默认的导航栏
创建一个默认的导航栏的步骤如下：
1. 向<nav>标签添加 class.navbar、navbar-default属性，并添加 role="navigation，role属性有利于增加可访问性
2. 向<div>元素添加class.navbar-header，内部包含带有class.navbar-brand的a元素，会让文本看起来大一号
  代码如下：
  <h3>默认的导航栏</h3>
  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
  <div class="navbar-header">
  <a href="#" class="navbar-brand">Brand</a>
  </div>
  <div>
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">IOS</a></li>
  <li><a href="#">SVN</a></li>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">JAVA
  <b class="caret"></b></a>
  <ul class="dropdown-menu">
  <li><a href="#">jmeter</a></li>
  <li><a href="#">EJB</a></li>
  <li><a href="#">Jasper Report</a></li>
  <li class="divider"></li>
  <li><a href="#">分离的链接</a></li>
  <li class="divider"></li>
  <li><a href="#">另一个分离的链接</a></li>
  </ul>
  </li>
  </ul>
  </div>
  </div>
  </nav>
响应式的导航栏
1. 为了给导航栏添加响应式特性，要折叠的内容必须包裹在带有class.collapse、 .navbar-collapse的<div>中
2. 折叠起来的导航栏实际上是一个带有class.navbar-toggle以及两个data-元素的按钮
3. 默认的导航与响应式导航主要在与1和2两点中
  代码如下：
  <h3>响应式的导航栏</h3>
  <nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
  <span class="sr-only">切换导航</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  </button>
  <a href="#" class="navbar-brand">菜鸟教程</a>
  </div>
  <div class="collapse navbar-collapse" id="example-navbar-collapse">
  <ul class="nav navbar-nav">
  <li class="active"><a href="#">IOS</a></li>
  <li><a href="#">SVN</a></li>
  <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
  Java <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
  <li><a href="#">jmeter</a></li>
  <li><a href="#">EJB</a></li>
  <li><a href="#">Jasper Report</a></li>
  <li class="divider"></li>
  <li><a href="#">分离的链接</a></li>
  <li class="divider"></li>
  <li><a href="#">另一个分离的链接</a></li>
  </ul>
  </li>
  </ul>
  </div>
  </div>
  </nav>
bootstrap中的图标
添加方法：
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
</ul>
1. 添加**class.glyphicon **， class.glyphicon-user和class.glyphicon-log-in表示需要使用ICON图标名，具体可以查看各个图标对应的类名，网址：bootstrap图标
导航栏的定位
1. 将导航栏固定在顶部：给nav标签添加class.navbar-fixed-top
  
  注意：为了防止导航栏与页面主题中的其他内容的顶部相交错，请向<body>标签添加至少50像素的内边距（padding），内边距的值可以根据需要进行调整
2. 将导航栏固定在底部：给nav标签添加class.navbar-fixed-bottom
3. 使导航栏随着页面一起滚动：给nav标签添加.navbar-static-top，使用该class，不要求向<body>添加内边距
倒置的导航栏
创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单的向.navbar class添加.navbar-inverse class即可

bootstrap学习记录

小技巧

基本知识

按钮

bootstrap的响应式网格布局

Font Awesome 图标库

表单控件

导航元素

导航栏

推荐阅读更多精彩内容