读书频道 > 网站 > 网页设计 > Bootstrap实战
2.3.3 设计Bootstrap网页模板
2013-11-02 14:33:48     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

为了把读者的注意力完全放到使用Bootstrap上,本节先做一下准备工作。这里创建一个基本的HTML模板。

1)启动Dreamweaver,新建HTML5文档。在菜单栏中选择“文件”“新建”选项,打开“新建文档”对话框。在对话框中选择“空白页”选项卡,在“页面类型”中选择HTML,在“布局”中选择“无”,然后在“文档类型”下拉列表中选择HTML5选项,最后单击“创建”按钮,完成HTML5文档的创建过程,如图2-13所示。

 

2)保存为index.html。在编辑窗口顶部的文档工具条中,设置网页标题为“Bootstrap应用模板”。切换到代码视图,可以看到HTML5文档结构与HTML4文档结构有很大区别:代码简洁,不再严格遵循HTML语法规范。下面的代码展示了一个典型的HTML文件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap应用模板</title>
</head>
<body>
</body>
</html>

3)为了把页面设计为一个Bootstrap标准模板,需要包含相应的CSS和JavaScript文件。模板文档的详细代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap应用模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap/css/bootstrap.min.css"  rel="stylesheet"  type="text/css">
</head>
<body>
  <script src="http://code.jquery.com/jquery.js"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

4)设置成功,现在就可以开始使用Bootstrap开发任何网站和应用程序了。我们在页面中输入一行信息,与大家打个招呼。使用<h1>标签输出一句问候,在标签类样式中,btn表示把<h1>标签定义为按钮样式,btn-success表示按钮为成功类型样式,btn-large表示大按钮效果。

在<h1>标签中包含一个<i>标签,用来定义图标,类icon-user表示用户图标,icon-white表示图标的颜色为白色,演示效果如图2-14所示。
<h1 class="btn btn-success btn-large"><i class="icon-user icon-white"></i> 
     Hello, world!</h1>

 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:2.3.2 Bootstrap架构解析
下一篇:2.4.1 设计交互组件
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站