第一次接触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的ajax功能实现web service的json转化
Aug 29 Javascript
ExtJs使用IFrame的实现代码
Mar 24 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
p5.js入门教程和基本形状绘制
Mar 15 Javascript
微信小程序实现刷脸登录
May 25 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
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 验证码实例代码
2010/06/01 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
Javascript 面向对象特性
2009/12/28 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python魔术方法详解
2015/02/14 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
网站开发实习生的自我评价
2013/12/11 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
个人自荐材料
2014/05/23 职场文书
离婚协议书格式
2014/11/21 职场文书
小学生思想品德评语
2014/12/31 职场文书
初中班主任工作随笔
2015/08/15 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS