BootStrap的使用

发布时间：2020-12-17 21:04:11 所属栏目：安全来源：网络整理

导读：? ? ? ? ? ? ? 使用Bootstrap已经有一段时间了，对于他的特性和用法已经基本掌握了。为了巩固自己的知识和没有接触过Bootstrap的人开始加入这个家族。写了这边Bootstrap博客。 ? ?一、入门 ? ? ? 使用Bootstrap推荐使用html5.Bootstrap 使用到的某些 HTML

?? ? ?? ? ? 使用Bootstrap已经有一段时间了，对于他的特性和用法已经基本掌握了。为了巩固自己的知识和没有接触过Bootstrap的人开始加入这个家族。写了这边Bootstrap博客。?

?一、入门
? ? ? 使用Bootstrap推荐使用html5.Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE?html>
?<html?lang="zh-CN">?
???...?
?</html>

如果你想开发移动端兼容（响应式布局）的网站。那么下面两点对你很重要：

为了确保适当的绘制和触屏缩放，需要在?<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呢？答案是 ? 善用class ? ? ? ? ?Bootstrap有非常多的class ? 一个标签可以有很多class，不同class用空格分开 ? 比如： ?<div class="label primary"></div>

那么我们在使用的时候去查阅官方文档就可以了。没必要去记住。 ?比如我需要用到居中属性，那我就去找。发现网上有实例，如下图：

那么我们就知道了 ? 原来是text-center属性

二、关键知识

? ?2.1栅格系统

关于栅格系统网上有很多教程。 ?我觉得只要你使用就离不开栅格系统，利用栅格系统可以很方便地做出非常好看的浏览器兼容的页面。

下面是从网上找的一个有关栅格系统的一览图：

<div?class="row">
??<div?class="col-sm-5?col-md-6">.col-sm-5?.col-md-6</div>
??<div?class="col-sm-5?col-sm-offset-2?col-md-6?col-md-offset-0">.col-sm-5?.col-sm-offset-2?.col-md-6?.col-md-offset-0</div>
</div>

<div?class="row">
??<div?class="col-sm-6?col-md-5?col-lg-6">.col-sm-6?.col-md-5?.col-lg-6</div>
??<div?class="col-sm-6?col-md-5?col-md-offset-2?col-lg-6?col-lg-offset-0">.col-sm-6?.col-md-5?.col-md-offset-2?.col-lg-6?.col-lg-offset-0</div>
</div>

三、封装的JavaScript插件

? ?有些东西大家都在用，于是Bootstrap将其封装为插件。供我们使用。如果我的网站只要这一个插件，那就单独引用插件就可以了。如果已经引入了Bootstrap.min.css,?Bootstrap.min.js ?就没必要引用了。

? 既然是封装的插件，当然有一些参数了。我们可以自己去取舍使用什么，不适用什么。

两种方式使用API ? ? ?

1.data-api

2.编程方式的api

$('#myModal').modal()??????????????????????//?以默认值初始化
$('#myModal').modal({?keyboard:?false?})???//?initialized?with?no?keyboard
$('#myModal').modal('show')????????????????//?初始化后立即调用?show?方法

在这里介绍我常用的几个插件

模态框

用于登录注册
标签页

不多说了，很常用
弹出框

弹出提醒，错误。成功等等 ? 。 ? 值得一提的是它可以从上下左右四个方面弹出，很有趣。
轮播图Carousel

?四、打包的样式花哨的CSS组件

这部分的东西大都是对基本控件的扩展。?

如下拉菜单就是对菜单的扩展

按钮组合输入组

导航

缩略图

进度条等等

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!