前端_Bootstrap简单使用

首先说一下简单使用方法:

1.首先上官网下载Bootstrap(就是一些js文件和一些css文件) ,网址: https://v3.bootcss.com/getting-started/#download

这个网站有基本模板index.html,直接拷贝(将js文件夹和css文件夹同时拷贝,自己手动添加jQuery,配置到index.html中即可),body标签内写上你想要编写的代码

2.对于你需要的样式,可以直接去网址https://www.runoob.com/bootstrap/bootstrap-buttons.html选择拷贝,修改一下名称即可

概念

前端框架,基于html,css,JavaScript
是一个半成品,开发人员可以在框架基础上,再进行开发,简化代码

好处:

定义了很多的css样式和js插件.开发人员可以使用这些样式和插件实现非常丰富的页面
响应式布局(很关键)

a) 同一套页面可以兼容不同分辨率的设备

Bootstrap基本入门案例

下载bootstrap文件
将下载文件中三个文件复制到项目中
创建html页面,引入必要的文件(JQuery文件)资源(https://v3.bootcss.com/getting-started/#download)这个网站中有基本模板

对html文件进行简单的修改

备注:Bootstrap.css文件和Bootstrap.min.css文件的区别: 内容一样,Bootstrap.min.css中去掉了所有的空格换行,所有代码都在一行,相当于压缩版的Bootstrap.css

简单案例Html代码:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

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

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

<script src="js/jquery-1.4.2.min.js"></script>

<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

响应式布局:

*同一套页面可以兼容不同分辨率的设备

*实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子,

*步骤:

1.定义容器:相当于html页面中的table

容器分类:

container:固定宽度,针对不同型号设备,不同型号的宽度固定,两边留白

container-fluid:每一种设备都是100%宽度

2.定义行.相当于之前的tr,样式row

3.定义元素:指定该元素在不同的设备上,所占的格子数目,样式:col-设备代号-格子个数

设备代号:

xs:超小屏幕手机<768px
sm:小屏幕平板 >=768px
md:中等屏幕桌面显示器>=992px
lg:大屏幕大桌面显示器 >=1200px

响应式布局:

12个栅格,针对不同宽度的屏幕显示的css效果不同

注意事项:

一行中格子个数超过12自动换行,栅格类适用于与屏幕宽度大于或等于分界点大小的设备
向上兼容,向下不兼容,
如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素占满一整行

css样式和插件(学艺不精,刚巧会用,不做详解)

全局css样式:

按钮

图片

表格

表单

组件:

导航条

分页条

插件:

轮播图

哪里不会删除那里 …..看浏览器显示变化