第一次接触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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
Oct 29 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
js获取url中&quot;?&quot;后面的字串方法
May 15 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
vue $set 给数据赋值的实例
Nov 09 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 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
phpmyadmin配置文件现在需要绝密的短密码(blowfish_secret)的2种解决方法
2014/05/07 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
Bootstrap插件全集
2016/07/18 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
jquery实现左右轮播切换效果
2018/01/01 jQuery
React-router4路由监听的实现
2018/08/07 Javascript
微信小程序使用swiper组件实现层叠轮播图
2018/11/04 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
python deque模块简单使用代码实例
2020/03/12 Python
Django框架请求生命周期实现原理
2020/11/13 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
出国留学介绍信
2014/01/13 职场文书
企业新年寄语
2014/04/04 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
小学中队活动总结
2015/05/11 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016新年晚会开场白
2015/12/03 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
浅谈Python魔法方法
2021/06/28 Java/Android