Bootstrap
文章平均质量分 91
冰阔落
Stay hungry, Stay foolish, Stop when you are perfect.
展开
-
Bootstrap 教程第二课:制作网站导航条
上一课介绍了用Bootstrap前端框架制作一个简易的主页,其中介绍了使用Bootstrap框架所需要的准备工作,以及文档格式要求,在这里及以后将不再复述,如有不明白的地方,可以查看上一节的内容(Bootstrap教程第一课:简单的Bootstrap主页(1))。制作网站的导航条,先从导航开始,导航的结构代码很简单,如下: 首页 博文 留言转载 2016-06-20 15:46:39 · 4425 阅读 · 0 评论 -
Bootstrap 教程第一课:简单的 Bootstrap 主页
写在前面:Bootstrap是目前最流行的前端框架,我从简单的实例开始,写一份文字版的Bootstrap教程,希望能对大家有所帮助。准备工作:1、下载Bootstrap框架核心文件。2、下载jQuery文件。3、下载HTML5兼容IE的JS插件。(各位可以从网上找到Bootstrap和jQuery以及HTML5 JS的官方下载地址,也可以直接点击下面的下载链接下载,我已转载 2016-06-20 16:06:46 · 4525 阅读 · 3 评论 -
Bootstrap 教程第三课:制作有图标的按钮
Bootstrap所使用的是字体图标Glyphicons,这个字体包含200个图标。使用字体图标时需要注意几点:1、每个图标字体都是有一个基类和相对应的图标类组成,如: 2、字体图标不能与其他元素共同存在,只能单独使用,使用时应创建span标签,并将基类和对应的图标类应用在span上。(如上代码)3、应用字体图标的span不能有任何文本内容,也不能有子元素。4、如转载 2016-06-20 16:46:25 · 14273 阅读 · 2 评论 -
Bootstrap 教程第四课:制作一组功能图标按钮
上一节内容,我们讲到在Bootstrap中,如何使用文字图标制作带有图标的按钮(Bootstrap教程第三课:制作有图标的按钮),这节课,我们将在上一节的基础上,进行一组功能图标按钮的制作。我们以文档的居左、居中、居右和两端对齐按钮为例,首页在Glyphicon字体图标中,找到这四个图标的对应的字体样式值,分别是:glyphicon glyphicon-align-leftglyp转载 2016-06-20 16:50:24 · 4346 阅读 · 0 评论 -
Bootstrap 教程第五课:制作下拉菜单
在Bootstrap教程第二课制作网站菜单中,提到了制作下拉菜单的相关代码(Bootstrap教程第二课:制作网站导航条),只是没有细细讲解,这节,我们来说说下拉菜单的制作。首页,制作一个按钮,可以是a标签,也可以是button按钮,代码如下:下拉菜单我们可以在btn的后面添加上 .btn-default 或 .btn-primary 类,使得这个按钮看起来更漂亮一转载 2016-06-20 16:56:03 · 1938 阅读 · 0 评论 -
Bootstrap 教程第六课:各种按钮组合样式
Bootstrap给按钮提供了很丰富的样式,以及组合,根据不同的需求,可以灵活定制自己想要得到的样式。在第四课中,我们介绍了一组按钮添加.btn-group类,使一组按钮组合起来成为一个小的功能按钮集,这个非常实用,有兴趣的可以去看一看。(Bootstrap教程第四课:制作一组功能图标按钮)这节在第四节的基础上,来介绍更多的按钮组合样式。如果我们有几个按钮组合,我们可以使用.btn转载 2016-06-20 17:02:04 · 4086 阅读 · 0 评论