Bootstrap 2.3.2学习

转载于 2015-04-04 18:00:00 发布 · 192 阅读

·

0

·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/haoke/p/4392574.html

文章标签：

#javascript #ViewUI

本文详细介绍了Bootstrap框架的基本使用方法，包括下载和安装、HTML5文档类型、栅格系统、响应式设计、基本样式等核心内容，适合初学者快速上手。

1.下载架包，下载编译好的文件，文件目录结构如下所示：

 bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

添加min代表：对没有添加min的文件压缩而得到的压缩版。

使用bootstrap开发页面大体布局如下：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

2.开发中必须使用HTML5文档类型：每个页面都应如下格式

对于中文来讲lang=”ch-CN”

<!DOCTYPE html>
<html lang="en">
...
</html>

3.默认栅格系统，默认为12列，形成一个940px宽的容器；

.row 代表一行, .span*代表站的列数，例如2列.span2

当你的屏幕是940px是，分成12列代表铺面全屏

<div class=”row”>

<div class=”span1” style=”background-color:red”></div>

<div calss=”span1” style=”background-color:red”></div>

</div>

.offset*代表偏移量向右偏

<div class=”row”>

<div class=”span1 offset1” style=”background-color:red”></div>

<div class=”span1” style=”background-color:red”></div>

</div>

显示效果只会出现一个红快，原因，第一个<div>向右偏移一个单位时把第二个<div>覆盖。

4.嵌套列：嵌套列就是在已有的.span下再次使用.row .span*。要注意子类中的列的和不能超过父类的列数。

<div class=”row”>

<div class=”span3”>

         <div class=”row” >

                  <div class=”span1”> </div>

                  <div class=”span2”></div>

</div>

</div>

</div>

5.流式栅格系统：

它采用百分比而不是像素。它和固定栅格系统一样拥有响应式布局的能力，这就保证了对于

不同的分辨率和设备作出适当的调整。

用法：将.row改为.row-fluid，其他的不变.span*，.offset*

在使用.row-fluid时里面的所有列都可以看为可分为12列，出于页面显示整齐，如果使用流式，

就一直使用不要掺固定。

6.布局:

固定布局.container，使用该布局的宽度是940px。

<div class=”container”>

</div>

流式布局：.container-fluid，它的宽度根据使用屏幕来定。

<div class=”container-fluid”>

</div>

7.响应式设计

使用响应式设计时，在页面中添加一个<meta>和引入对应额响应式的样式

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

该特性一般在使用出才添加。

8.基本的样式：

<h1>到<h6>都可以使用

bootstrap定义了全局font-size是14px，line-height是20px，这些样式都应用到了<body>和所有的段落上。

另外，对<p>还定义了1/2行高（默认为10px）的底部外边局（margin）属性。

.lead使段落突出

<p class=”lead”> 突出</p>

对不需要强调的使用small标签。

<small>….</small>

加粗<strong>…</strong>

斜体<em>….</em>

文本对齐方式：.text-left，.text-center，.text-right

转载于:https://www.cnblogs.com/haoke/p/4392574.html

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符 | 博主筛选后可见

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。