【在线学习系列】Bootstrap 3

2016-8-2 二赛君 学习笔记

本部分记录Bootstrap CSS学习笔记



概览


1 HTML5 文档类型

Bootstrap使用html5和css属性,在文档起始需要声明文档类型Doctype,包括以下代码

<!DOCTYPE html>
<html>
...
</html>


2 移动设备优先

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">


加入viewport标签,width控制设备的宽度。

device-width不同设备不同尺寸,initial-scale=1.0 ,无缩放

user-scalable=no  禁用缩放功能,保证用户设备看到的是原网页尺寸

maximum-scale=1.0 无缩放


3 响应式图像

<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}


图像添加 img-responsive calss 支持响应式布局

css属性如下 包括内嵌display 自动height  100宽度


4 容器


<div class="container">
  ...
</div>
.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

外边距margin由浏览器决定



网格系统

响应式网站系统随屏幕视口尺寸变化而变化,系统最多分为12列。

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

    创建行 .row

    创建列,如创建三个相等的列,使用 .col-xs-4

    超小设备手机(<768px)                 .col-xs-

   小型设备平板电脑(>=768px)          .col-sm-

   中型设备台式电脑(>=992px)          .col-md-

   大型设备台式电脑(>=1200px)         .col-lg-

   但最后的列和数量为12

   其基本结构为


<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>

列偏移     

使用   .col-md-offset-*


比如有<div class="col-md-6">..</div>,我们将使用 .col-md-offset-3 class 来居中这个 div。

列嵌套

在已有的列中添加组 .col-**-**,但应注意,总和为12



表格

标签 描述
<table> 为表格添加基础样式。
<thead> 表格标题行的容器元素(<tr>),用来标识表格列。
<tbody> 表格主体中的表格行的容器元素(<tr>)。
<tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
<td> 默认的表格单元格。
<th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
<caption> 关于表格存储内容的描述或总结。
描述
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑
联合使用所有表格类

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格:

描述
.active 将悬停的颜色应用在行或者单元格上
.success 表示成功的操作
.info 表示信息变化的操作
.warning 表示一个警告的操作
.danger 表示一个危险的操作





图片


Bootstrap 提供了三个可对图片应用简单样式的 class:

.img-rounded:添加 border-radius:6px 来获得图片圆角。

.img-circle:添加 border-radius:50% 来让整个图片变成圆形。

.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。


字体图标


<span class="glyphicon glyphicon-search"></span>
替换 glyphicon-search ,使用不同图标。


点击这里在线定制图标

可以将图标放置在按钮里,有链接或无链接


<p>Header icon on a button:
        <button type="button" class="btn btn-default btn-sm">
          <span class="glyphicon glyphicon-header"></span> Header
        </button>
      </p>
      <p>Header icon on a styled link button:
        <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-header"></span> Header
        </a>
      </p>

下拉菜单

通过 class dropdown 实现。


<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

使用class dropdown-header 向下拉菜单的标签区域添加标题。

<li role="presentation"  class=“dropdown-header”> 下拉菜单说明 </li> 

学,无止境。   

在线学习系列文章,Bootstrap 3

    文章地址:http://www.ersaijun.cn/ersaijun/?post=139

     二赛君

    2016.08

标签: 学习笔记 bootstrap 网站建设

评论:

LiaQueen
2016-08-08 10:58
加油加油 顺便求勾搭呀。

发表评论:

Copyright 2011-2017 | Powered by emlog | Redesigned by Kaspar.s
京ICP备13003113号 sitemap