编程 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 相关文章推荐

Javascript的一种模块模式

Mar 22 Javascript

jQuery 前的按键判断代码

Mar 19 Javascript

javascript基础知识大集锦(二) 推荐收藏

Jan 13 Javascript

js实现两个值相加alert出来精确到指定位

Sep 25 Javascript

javascript工厂方式定义对象

Dec 26 Javascript

javascript的switch用法注意事项分析

Feb 02 Javascript

JavaScript中eval()函数用法详解

Dec 14 Javascript

vue.js开发实现全局调用的MessageBox组件实例代码

Nov 22 Javascript

js实现控制文件拖拽并获取拖拽内容功能

Feb 17 Javascript

webpack4.x开发环境配置详解

Aug 04 Javascript

vue+高德地图实现地图搜索及点击定位操作

Sep 09 Javascript

ztree+ajax实现文件树下载功能

May 18 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

在WordPress中使用wp-cron插件来设置定时任务

2015/12/10 PHP

深入理解PHP中的count函数

2016/05/31 PHP

PHP中explode函数和split函数的区别小结

2016/08/24 PHP

php设计模式之正面模式实例分析【星际争霸游戏案例】

2020/03/24 PHP

php连接mysql之mysql_connect()与mysqli_connect()的区别

2020/07/19 PHP

javascript 打开页面window.location和window.open的区别

2010/03/17 Javascript

表头固定(利用jquery实现原理介绍)

2012/11/08 Javascript

js操纵跨frame的三级联动select下拉选项实例介绍

2013/05/19 Javascript

8个实用的jQuery技巧

2014/03/04 Javascript

用jquery实现的一个超级简单的下拉菜单

2014/05/18 Javascript

javascript最基本的函数汇总

2015/06/25 Javascript

jQuery实现手机自定义弹出输入框

2016/06/13 Javascript

jQuery模仿单选按钮选中效果

2016/06/24 Javascript

功能强大的Bootstrap效果展示（二）

2016/08/03 Javascript

关于angularJs指令的Scope(作用域)介绍

2016/10/25 Javascript

BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)

2016/12/01 Javascript

js实现下一页页码效果

2017/03/07 Javascript

详解Angular-cli生成组件修改css成less或sass的实例

2017/07/27 Javascript

Vue实例的对象参数options的几个常用选项详解

2019/11/08 Javascript

Python语言技巧之三元运算符使用介绍

2013/03/04 Python

Python数据类型详解（三）元祖：tuple

2016/05/08 Python

Python中Selenium模拟JQuery滑动解锁实例

2017/07/26 Python

python操作日志的封装方法(两种方法)

2019/05/23 Python

Django 删除upload_to文件的步骤

2020/03/30 Python

python 无损批量压缩图片（支持保留图片信息）的示例

2020/09/22 Python

美国床垫和床上用品公司：Nest Bedding

2017/06/12 全球购物

高级销售求职信

2014/02/21 职场文书

社团活动总结报告

2014/06/27 职场文书

党员个人自我剖析材料

2014/10/08 职场文书

人事主管岗位职责

2015/02/04 职场文书

先进工作者个人总结

2015/02/15 职场文书

现货白银电话营销话术

2015/05/29 职场文书

企业反腐倡廉心得体会

2015/08/15 职场文书

Python使用protobuf序列化和反序列化的实现

2021/05/19 Python

Python中文纠错的简单实现

2021/07/07 Python

python turtle绘制多边形和跳跃和改变速度特效

2022/03/16 Python