您的位置：首页 > Web前端 > BootStrap

bootstrap的使用

2016-01-20 00:00 579 查看
摘要:BootStrap作为一款程序员必知的前端框架。如果你还不会用，是不是太Low了。

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

1

2

3

4
<!
DOCTYPE
html>


<
html
lang
=
"zh-CN"
>


...


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

为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签。
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呢？答案是善用classBootstrap有非常多的class一个标签可以有很多class，不同class用空格分开比如：<divclass="labelprimary"></div>

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





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

二、关键知识

2.1栅格系统

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

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





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

1

2

3

4

5

6

7

8

9
<
div
class
=
"row"
>


<
div
class
=
"col-sm-5col-md-6"
>.col-sm-5.col-md-6</
div
>


<
div
class
=
"col-sm-5col-sm-offset-2col-md-6col-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-6col-md-5col-lg-6"
>.col-sm-6.col-md-5.col-lg-6</
div
>


<
div
class
=
"col-sm-6col-md-5col-md-offset-2col-lg-6col-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

?

1

2

3
$('#myModal').modal()//以默认值初始化

$('#myModal').modal({keyboard:false})//initializedwithnokeyboard

$('#myModal').modal('show')//初始化后立即调用show方法
在这里介绍我常用的几个插件

模态框
用于登录注册

标签页
不多说了，很常用

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

轮播图Carousel

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

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

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

按钮组合输入组

导航

缩略图

进度条等等
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航