学习笔记：

学习视频链接：https://www.bilibili.com/video/BV14J4114768?p=62&spm_id_from=pageDriver

bootstrap的使用：

1、下载bootstrap 网址：https://bootstrap.css88.com/

2、将下载好的文件复制到项目

3、使用链接引入css样式资源文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

4、测试bootstrap的使用：（bootstrap通过类名控制css样式）

<button type="button" class="btn btn-success">Success</button>

使用bootstrap的css样式成功：

bootstrap的布局容器：

1、container类：

响应式布局容器固定宽度
大屏( >=1200px)宽度定为1170px
中屏( >=992px)宽度定为970px
小屏( >=768px)宽度定为750px
超小屏(100%)

2、container-fluid类：

流式布局容器百分百宽度
占据全部视口( viewport )的容器。
适合于单独做移动端开发

bootstrap的栅格系统：

1、栅格系统英文为“gridsystems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
2、Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport)尺寸的增加，系统会自动分为最多12列。
3、通过类前缀控制页面布局效果
eg：

 <style>[class^="col"] {border: 1px solid #000;}</style><div class="container"><div class="row"><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">1</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">2</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">3</div><div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">4</div></div><div class="row"><div class="col-lg-6">a</div><div class="col-lg-2">b</div><div class="col-lg-2">c</div><div class="col-lg-2">d</div></div>

如图所示：（大屏幕占3格，中等屏幕占4格，小屏幕占6格，超小屏幕设备占12格）

推、拉、隐藏功能：

详细查看bootstrap网址：https://bootstrap.css88.com/css/

前端基础之bootstrap相关推荐

web前端基础之Bootstrap(三) - 插件
模态框放在body内的直接子元素弹出方式 1.通过 data 属性 data-toggle="modal" data-target="#myModal" ...
python之路_前端基础之Bootstrap 组件
文档内容参考地址:http://v3.bootcss.com/components/ 一.图标如下例,Star文本前有一个空格: <button type="button" ...
【Java Web前端开发】BootStrap入门
文章目录 Bootstrap 响应式布局 CSS样式和JS插件案例 Bootstrap 1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Boot ...
❤️《Vue前端基础框架集合从入门到高级》（小白也可学，建议收藏）❤️
<Vue前端基础框架集合从入门到高级>,小白也可学文章目录 <Vue前端基础框架集合从入门到高级>,小白也可学 ❤️一.前端核心分析 ❤️1.1.概述 ❤️1.2.前端三要素 ...
前端基础CSS+html篇 2w字吐血总结
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
使用双标记写html代码时如何进行嵌套,【2020Python修炼记】前端开发之前端基础和HTML入门...
发表于:2020-11-12 18:21 阅读: 119次这篇教程主要讲解了[2020Python修炼记]前端开发之前端基础和HTML入门,并附有相关的代码样列,我觉得非常有帮助,现在分享出来大家 ...
程序员练级攻略（2018）：前端基础和底层原理
这个是我订阅陈皓老师在极客上的专栏<左耳听风>,我整理出来是为了自己方便学习,同时也分享给你们一起学习,当然如果有兴趣,可以去订阅,为了避免广告嫌疑,我这就不多说了!以下第一人称是指陈皓 ...
web前端基础 html5+css3（十三.移动端）
目录一.移动端基础 1.视口 2.meta视口标签 3.二倍图做法 4.背景缩放background-size 5.背景图片2倍图 6.css3盒子模型 7.移动端特殊样式二.移动端的常见布局三 ...
Web前端框架学习—Bootstrap
零. 写在前面 Bootstrap是一个非常好的前端框架,在前端时间的小项目中需要使用Bootstrap做前端,于是就学习了一下,觉得非常好用,推荐给新手. 一. 什么是Bootstrap? Boot ...

前端基础之bootstrap