第一次接触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框架

第一次接触Bootstrap框架

第一次接触Bootstrap框架

第一次接触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实战教程

Javascript 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
JavaScript单元测试ABC
Apr 12 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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
php date与gmdate的获取日期的区别
2010/02/08 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PHP反射学习入门示例
2019/06/14 PHP
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
2011/08/09 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
node.js实现快速截图
2016/08/27 Javascript
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
2017/09/13 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
Python json模块使用实例
2015/04/11 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python可以实现栈的结构吗
2020/05/27 Python
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
财务经理岗位职责
2013/11/09 职场文书
入党自我评价范文
2014/02/02 职场文书
圣诞节红领巾广播稿
2014/02/03 职场文书
欢迎横幅标语
2014/06/17 职场文书
虎兄虎弟观后感
2015/06/12 职场文书
三好学生竞选稿
2015/11/21 职场文书
小学运动会开幕词
2016/03/04 职场文书
Python一些基本的图像操作和处理总结
2021/06/23 Python
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript