编程 Javascript

第一次接触Bootstrap框架

Posted in Javascript onOctober 24, 2016

关于Bootstrap，话不多说，直接进入主题：

安装

可以通过bootstrap官方网站下载安装

可以通过Bower安装（关于bower一种包管理器，本文不做详解）

bower install bootstrap

可以通过npm安装（关于npm可以阅读）

npm install bootstrap

项目中引入Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>BootstrapDemo</title>
 <!--step1:设置viewport-->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--step2:引入Bootstrap-->
 <link rel="stylesheet" href="css/bootstrap.css">
</head>

布局容器

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

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

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

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

栅格系统

Bootstrap提供了一套响应式的, 移动优先的流式栅格系统, 随着屏幕或视口(viewport)尺寸的不同, 系统会自动的分成12份；

栅格系统是通过一系列的行（row）和列(column)的组合来创建页面布局；

“行（row）”必须包含在.container或.container-fluid容器中，

栅格系统中的媒体查询

第一次接触Bootstrap框架

栅格系统中的参数

第一次接触Bootstrap框架

案例代码

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--step1:设置viewport-->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--step2:引入Bootstrap-->
 <link rel="stylesheet" href="css/bootstrap.css">
 <style>
 .container .row div {
 background-color: grey;
 border:1px solid red;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="row">
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">2</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">3</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">4</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">5</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">6</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">7</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">8</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">9</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">10</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">11</div>
 <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">12</div>
 </div>
</div>
</body>

页面效果会随着屏幕的大小col-lg-， col-md- ，col-sm-， col-xs- 显示不同的效果

第一次接触Bootstrap框架

栅格系统中的列偏移（offsets）
col-lg-offset-

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!--step1:设置viewport-->
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 <!--step2:引入Bootstrap-->
 <link rel="stylesheet" href="css/bootstrap.css">

 <style>
 .container .row div {
 background-color: grey;
 border:1px solid red;
 }
 </style>
</head>
<body>
<div class="container">
 <div class="row">
 <div class="col-lg-offset-11 col-lg-1">row - col -1</div>
 </div>
</div>
</body>

效果如下（偏移了11列）

第一次接触Bootstrap框架

栅格系统中的列嵌套

<div class="container">
 <div class="row">
 <div class="col-lg-4 col-md-2 col-sm-3 col-xs-6">1</div>
 <div class="col-lg-8 col-md-2 col-sm-3 col-xs-6">2
 <div class="row">
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">3</div>
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">4</div>
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">5</div>
 <div class="col-lg-3 col-md-2 col-sm-3 col-xs-6">6</div>
 </div>
 </div>
 </div>
</div>

效果如下

第一次接触Bootstrap框架

流式布局容器

将最外面的布局元素.container 改为.container-fluid,就可以将固定的栅格布局转换为100%宽度的布局

<div class="contaienr-fluid">
 <div class="row">
 
 </div>
</div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

第一次接触Bootstrap框架

- Author -

夜雨羽翼

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS模拟的QQ面板上的多级可展开的菜单

Oct 10 Javascript

javascript中replace( )方法的使用

Apr 24 Javascript

JS实现简单的二维矩阵乘积运算

Jan 26 Javascript

javascript使用 concat 方法对数组进行合并的方法

Sep 08 Javascript

深入理解JavaScript中的尾调用(Tail Call)

Feb 07 Javascript

最全的JavaScript开发工具列表总有一款适合你

Jun 29 Javascript

JavaScript设计模式之缓存代理模式原理与简单用法示例

Aug 07 Javascript

vue elementUI table 自定义表头和行合并的实例代码

May 22 Javascript

VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

Apr 17 Javascript

vue界面发送表情的实现代码

Sep 11 Javascript

原生JS实现九宫格抽奖

Sep 13 Javascript

微信小程序弹窗禁止页面滚动的实现代码

Dec 30 Javascript

Node.js Sequelize如何实现数据库的读写分离

Oct 23 #Javascript

JavaScript数组去重的几种方法效率测试

Oct 23 #Javascript

Javascript 实现简单计算器实例代码

Oct 23 #Javascript

JavaScript页面实时显示当前时间实例代码

Oct 23 #Javascript

jquery 实现回车登录详解及实例代码

Oct 23 #Javascript

AngularJS ng-repeat数组有重复值的解决方法

Oct 23 #Javascript

web前端开发upload上传头像js示例代码

Oct 22 #Javascript

You might like

ini_set的用法介绍

2014/01/07 PHP

JS 获取浏览器和屏幕宽高等信息代码

2014/03/31 Javascript

玩转方法:call和apply

2014/05/08 Javascript

使用GruntJS构建Web程序之安装篇

2014/06/04 Javascript

jQuery页面加载初始化常用的三种方法

2014/06/04 Javascript

JavaScript时间转换处理函数

2015/04/14 Javascript

基于jQuery实现的双11天猫拆红包抽奖效果

2015/12/01 Javascript

javascript中的3种继承实现方法

2016/01/27 Javascript

Javascript自执行匿名函数(function() { })()的原理浅析

2016/05/15 Javascript

jQuery元素属性操作实例(设置、获取及删除元素属性)

2016/09/08 Javascript

Kotlin学习第一步 kotlin语法特性

2017/05/25 Javascript

nodejs中art-template模板语法的引入及冲突解决方案

2017/11/07 NodeJs

nodejs连接mysql数据库及基本知识点详解

2018/03/20 NodeJs

微信小程序下拉框组件使用方法详解

2018/12/28 Javascript

微信公众平台获取access_token的方法步骤

2019/03/29 Javascript

详解vue中this.$emit()的返回值是什么

2019/04/07 Javascript

Vue 实现前进刷新后退不刷新的效果

2019/06/14 Javascript

Vue 实现html中根据类型显示内容

2019/10/28 Javascript

javascript实现移动端红包雨页面

2020/06/23 Javascript

JS绘图Flot如何实现动态可刷新曲线图

2020/10/16 Javascript

python定时采集摄像头图像上传ftp服务器功能实现

2013/12/23 Python

Python3.5实现的罗马数字转换成整数功能示例

2019/02/25 Python

python基础知识（一）变量与简单数据类型详解

2019/04/17 Python

python实现通过队列完成进程间的多任务功能示例

2019/10/28 Python

python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例

2020/02/27 Python

通过案例解析python鸭子类型相关原理

2020/10/10 Python

用python对excel查重

2020/12/07 Python

基于html5实现的图片墙效果

2014/10/16 HTML / CSS

基督教卡片、励志礼品、家居装饰等：DaySpring

2018/10/12 全球购物

数据库基础的一些面试题

2012/02/25 面试题

final, finally, finalize的区别

2012/03/01 面试题

《美丽的公鸡》教学反思

2014/02/25 职场文书

房屋公证委托书

2014/04/03 职场文书

2015年党员岗位承诺书

2015/04/27 职场文书

laravel ajax curd 搜索登录判断功能的实现

2021/04/17 PHP

Android中View.post和Handler.post的关系

2022/06/05 Java/Android