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

BootStrap学习(1)

2015-11-03 17:22 513 查看

一、Bootstrap简介

BootStrap是由Twitter推出的前端框架，2011年八月在GitHub上发布，BootStrap是基于Html,Css,Javascript的，可用于快速开发web，是现在主流的前端框架。

Bootstrap的优点有:

1.移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式。

2.浏览器支持：所有的主流浏览器都支持Bootstrap。

3.容易上手：因为Bootstrap是基于HTML和CSS的基础知识，所以学习使用轻松。

4.响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

二、下载BootStrap

可以从http://getbootstrap.com/上下载Bootstrap的最新版本。当您点击这个链接时，将看到如下所示的网页：



您会看到两个按钮：

DownloadBootstrap：下载Bootstrap。点击该按钮，您可以下载BootstrapCSS、JavaScript和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

DownloadSource：下载源代码。点击该按钮，您可以直接从from上得到最新的BootstrapLESS和JavaScript源代码。这个是包含上面的压缩内容再加上源代码

我们下载DownloadBootstrap这个就可以了。

然后这个的文件结构是



已经看到里面是一些CSS和JS还有Glyphicons的字体。

三、引入到HTML

1.把下载好的BootStrap文件放到项目中。

2.一个引用BootStrap的html模板:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<linkhref="../js/bootstrap-3.3.5/dist/css/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="../js/jquery-1.9.1.min.js"></script>
<scriptsrc="../js/bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>


在这里，可以看到<Head>..</Head>包含了jquery.js、bootstrap.min.js和bootstrap.min.css文件，用于让一个常规的HTML文件变为使用了Bootstrap的模板。

注意:因为BootStrap的javascript插件需要引入jQuery，所以要另外下载一个Jquery.js，并且要放到bootstrap.min.js的前面。

四、用BootStrapCDN加速点

可以不用下载BootStrap，直接使用一些BootStrap加速点，使用CND加速点的好处：是访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

可根据个人喜欢的CDN加速点选用,这里使用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源

HTML模板就可以变成了:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title></title>
<!--新Bootstrap核心CSS文件-->
<linkhref="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"rel="stylesheet"/>

<!--jQuery文件。务必在bootstrap.min.js之前引入-->
<scriptsrc="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!--最新的Bootstrap核心JavaScript文件-->
<scriptsrc="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

</head>
<body>

</body>
</html>


注意:使用CDN必须有外网才可以。

五、第一个例子_字体图标

上面下载安装BootStrap的时候以经了解过它的目录结构，

在dist文件夹内的fonts文件夹内可以找到字体图标，它包含了下列这些文件：

glyphicons-halflings-regular.eot

glyphicons-halflings-regular.svg

glyphicons-halflings-regular.ttf

glyphicons-halflings-regular.woff

相关的CSS规则写在dist文件夹内的css文件夹内的bootstrap.css和bootstrap-min.css文件上。

Bootstrap捆绑了200多种字体格式的字形这里有BootStrap的字体图标列表http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

CSS规则解释

@font-face{
font-family:'GlyphiconsHalflings';
src:url('../fonts/glyphicons-halflings-regular.eot');
src:url('../fonts/glyphicons-halflings-regular.eot?#iefix')format('embedded-opentype'),url('../fonts/glyphicons-halflings-regular.woff')format('woff'),url('../fonts/glyphicons-halflings-regular.ttf')format('truetype'),url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular')format('svg');
}

.glyphicon{
position:relative;
top:1px;
display:inline-block;
font-family:'GlyphiconsHalflings';
-webkit-font-smoothing:antialiased;
font-style:normal;
font-weight:normal;
line-height:1;
-moz-osx-font-smoothing:grayscale;
}


所以font-face规则实际上是在找到glyphicons地方声明font-family和位置。

.glyphiconclass声明一个从顶部偏移1px的相对位置，呈现为inline-block，声明字体，规定font-style和font-weight为normal，设置行高为1。除此之外，使用-webkit-font-smoothing:antialiased和-moz-osx-font-smoothing:grayscale;获得跨浏览器的一致性。

用法

如需使用图标，只需要简单地使用下面的代码即可。

<spanclass="glyphiconglyphicon-search"></span>
在一个<span></span>标签中加入.class样式即可。


<!DOCTYPEhtml>
<html>
<head>
<title>Bootstrap实例-如何使用字形图标（Glyphicons）</title>
<linkhref="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"rel="stylesheet">
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<scriptsrc="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<p>
<ahref="#"><spanclass="glyphiconglyphicon-search">搜索</span></a>
<ahref="#">
<spanclass="glyphiconglyphicon-fast-backward">首页</span>
</a>
<ahref="#">
<spanclass="glyphiconglyphicon-fast-forward">末页</span>
</a>
<buttontype="button"class="btnbtn-default">
<spanclass="glyphiconglyphicon-zoom-in">放大</span>
</button>
<buttontype="button"class="btnbtn-default">
<spanclass="glyphiconglyphicon-trash">删除</span>
</button>
</p>
<buttontype="button"class="btnbtn-defaultbtn-lg">
<spanclass="glyphiconglyphicon-user"></span>用户
</button>
<buttontype="button"class="btnbtn-defaultbtn-sm">
<spanclass="glyphiconglyphicon-user"></span>用户
</button>
<buttontype="button"class="btnbtn-defaultbtn-xs">
<spanclass="glyphiconglyphicon-user"></span>用户
</button>
</body>
</html>


效果:



其中用户中的btn-lgbtn-smbtn-xs是三个控制大小的样式。

自定义大小和颜色

通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。

<buttontype="button"class="btnbtn-primarybtn-lg"style="font-size:60px">
<spanclass="glyphiconglyphicon-user"></span>用户
</button>


定制字体颜色

<buttontype="button"class="btnbtn-primarybtn-lg"style="color:color:#f00;">
<spanclass="glyphiconglyphicon-user"></span>用户
</button>





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航