bootstrap的使用

时间 2019-11-10

标签 bootstrap 使用栏目 Bootstarp 繁體版

原文原文链接

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

<! DOCTYPE html>

< html lang = "zh-CN" >

...

</ html >

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

为了确保适当的绘制和触屏缩放，须要在 <head> 之中添加 viewport 元数据标签。html5

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

在移动设备浏览器上，经过为视口（viewport）设置 meta 属性为 user-scalable=no 能够禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感受。注意，这种方式咱们并不推荐全部网站使用，仍是要看你本身的状况而定！编程

1	`<` `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>api

那么咱们在使用的时候去查阅官方文档就能够了。不必去记住。好比我须要用到居中属性，那我就去找。发现网上有实例，以下图：浏览器

那么咱们就知道了原来是text-center属性布局

2、关键知识
网站

2.1栅格系统spa

关于栅格系统网上有不少教程。我以为只要你使用就离不开栅格系统，利用栅格系统能够很方便地作出很是好看的浏览器兼容的页面。
.net

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

Class 前缀 .col-xs- 超小设备手机（<768px）
                .col-sm- 小型设备平板电脑（≥768px）
               .col-md- 中型设备台式电脑（≥992px）
               .col-lg- 大型设备台式电脑（≥1200px）

< 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 >

3、封装的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

4、打包的样式花哨的CSS组件

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

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

按钮组合输入组

导航

缩略图

进度条等等