bootstrap的引入和使用
Bootstrap的下载
一. 使用Bootstrap第一步,先将生成环境的Bootstrap下载下来。然后将下载,然后引入到自己建好的当前目录中
二、点到起步中的基本模板
将看到的整段代码复制粘贴到建好的index.html文件中
官网明确表示:
使用此给出的这份超级简单的HTML模板,或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴
本来是想在这里写Book,但发现官网上的语言组织的更牛逼!接下来就跟着我一起进入Bootstrap的css样式、组件、插件。
Bootstrap支持移动设备优先
也就是说使用Bootstrap可以在移动设备上运行。为了确保适当的绘制和触屏缩放,需要在<head>
之中添加viewport元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap重置样式
为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid">
...
</div>
栅格系统
栅格系统的鼻祖是 https://960.gs/.
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:
栅格参数
使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。
一些常使用网站
阿里巴巴图标库网站:
如果想做图表,那可以去官网:
PS:还是那句话,使用Bootstrap非常简单,根据项目的需求适当去官网复制粘贴,然后根据需求更改自己的内容,如果想修改自己的样式,可以添加类,按照之前咱们学习css一样的方式,给它相应的样式
bootstrap的引入和使用的更多相关文章
- BootStrap框架引入文件
bootstrap -- 框架 引入需要的 这是外网的------************************************************************* < ...
- bootstrap标签引入地址
http://www.bootcdn.cn/bootstrap/ <link rel="stylesheet" href="http://apps.bdimg.co ...
- bootstrap 无需引入 直接使用
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="styl ...
- 基于springboot+bootstrap+mysql+redis搭建一套完整的权限架构【六】【引入bootstrap前端框架】
https://blog.csdn.net/linzhefeng89/article/details/78752658 基于springboot+bootstrap+mysql+redis搭建一套完整 ...
- vuejs 使用vue-cli引入bootstrap
前言:对于刚刚进入vuejs的队伍中的小白来讲,很多都是模糊的,js操作dom节点的思想萦绕,还不能自由切换在二者之间. 解决之道: 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤 ...
- vue引入bootstrap——webpack
想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行. 1.引入jquery 2.引入bootstrap 阅读本文前,应该能够搭建环境,使用vue-cli进行项目的创建,可以参考 ...
- webpack2引入bootstrap的坑
在webpack官网教程的代码分离-css章节中,给出的例子是这样的. //安装 ExtractTextWebpackPlugin 如下 npm install --save-dev extract- ...
- Bootstrap 3之美01-下载并引入页面
本篇主要包括: ■ 下载Bootstrap 3■ Bootstrap 3引入页面 下载Bootstrap 3 →打开网站:http://getbootstrap.com/→点击屏幕中央位置的Down ...
- 在Vue-cli项目中引入Bootstrap
(1)到bootstrap官网下载所需版本的bootstrap.zip文件. (2)将bootstrap.min.css以及bootstrap.min.js解压到assets文件夹,另外还需要将fon ...
随机推荐
- Decorator(装饰)
意图: 动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator 模式相比生成子类更为灵活. 适用性: 在不影响其他对象的情况下,以动态.透明的方式给单个对象添加职责. 处理那些可以撤消 ...
- cf812 C 二分
C. Sagheer and Nubian Market time limit per test 2 seconds memory limit per test 256 megabytes input ...
- UVA-11383 Golden Tiger Claw (KM算法)
题目大意:一张可行二分图的权值以邻接矩阵的形式给了出来,现在要找每一个节点的可行顶标,使顶标和最小. 题目分析:直接用KM算法,结束后顶标之和最小...模板题. 代码如下: # include< ...
- C++设计与声明——让接口容易被正确使用
一个简答易错的例子 class Date { public Date(int month,int day,int year); } 一年后使用这个接口的时候,写了Date d(15,10,2015)或 ...
- asp.net 导入Excel记录到数据库中
常用到的一个数据库导入功能,这样的话就省了很大一部分时间来处理程序上的问题而不是无休止的重复复制粘贴动作. 其他的废话不多说,直接上代码: 前提条件: 根目录下建立uploadfiles文件夹(用于保 ...
- bzoj1367
题解: 左偏树模板题 维护n/2的好多课左偏树 每一次加进来一个点的时候,只有一个点 然后每次中位数比前面小的时候,那么和前面合并 代码: #include<bits/stdc++.h> ...
- L181 The microscopic structure of a cat’s tongue helps keep its fur clean
T.S. eliot's mystery cat, Macavity, besides being a criminal mastermind able to evade the combined r ...
- New Concept English Two 22 58
$课文56 比声音还快! 579. Once a year, a race is held for old cars. 旧式汽车的比赛每年举行一次. 580. A lot of cars enter ...
- hosts 配置
hosts 配置 在windows上比较好的方法就是在本地配制hosts,在windows/system32/drivers/etc/hosts 下,增加 127.0.0.1 m.t.XXXX.com ...
- git 基础学习笔记
配置ssh 打开命令行或者git bash 输入 创建git库 git init 检查当前状态 $ git status On branch master nothing to commit, wor ...