BootStrap简介与使用

来源：互联网发布：apache启动报错编辑：程序博客网时间：2024/06/05 03:25

1.BootStrap的简介

Bootstrap，是来自 Twitter的目前最受欢迎的响应式前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷

2.BootStrap的特点

(1)HTML5文档类型

BootStrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5的文档类型,在项目中的每个页面都要参照下面的格式设计

<!DOCTYPE html><html lang="zh-CN">  ...</html>

（2）移动设备优先

BootStrap3整个是支持移动设备的，为了确保适当的绘制和触屏缩放，需要在<head>中添加viewport元数据标签

<meta name="viewport" content="width=device-width, initial-scale=1">

（3）排版与链接

Bootstrap 排版、链接样式设置了基本的全局样式，分别是：

为 body 元素设置 background-color: #fff;

使用 @font-family-base、@font-size-base 和@line-height-base 变量作为排版的基本参数

为所有链接设置了基本颜色@link-color ，并且当链接处于:hover 状态时才添加下划线

(4)布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套

.container类用于固定宽度并支持响应式布局的容器

<div class="container">  ...</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

<div class="container-fluid">  ...</div>

3.删格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备

下面从实践中更好的学习BootStrap

HTML代码如下:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>第一个BootStrap文件</title>    <link href="bootstrap.min.css" rel="stylesheet">    <script src="bootstrap.min.js"></script>    <script src="jquery-migrate-1.4.1.min.js"></script>    <style>        .row{            margin-top: 10px;            margin-bottom: 0;        }        [class*="col-"]{            padding-top: 15px;            padding-bottom: 15px;            background-color: rgba(84,64,124,.15);            border: 1px solid #dddddd;        }    </style></head><body><div class="container">    <div class="row">        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>        <div class="col-md-1">.col-md-1</div>    </div></div></body></html>

浏览器结果:

上面所写和上述所描述的删格系统一直，都是把一行分成好几个列，并且列不能超过12列，如果超过会自动在下一行.

这是一个最简单的bootstrap，当然bootstrap还有很多的样式和用法，可以去官网查看.

http://www.bootcss.com/

阅读全文

0 0