原计划一个月至少更新2此笔记,但是上个月只有一次,这个月快月底了还没有更新,实在是计划没有变化快,太忙了。就连原有的一些bug都来不及改,比如说ckeditor提交的时候会多出一些引号来,导致上次有个图片没有显示出来,今天得空来补充一发。
上次对html知识做了一些总结,今天结合bootstrap说一下页面布局。
选用bootstrap是因为我本人对前端没有办法,好在现在有很多前端框架可以使用。
首先,我们的页面设计采用三明治结构,页头,内容,页脚,这里利用bootstrap里面的栅格系统。代码如下:
<div class="container"> <div class="row">这是页头</div> <div class="row">这是内容</div> <div class="row">这是页脚</div> </div>
看见没,框架布局就是这么简单任性。
然后页头我们放什么东西呢,这里我们设计放一个标题和一个导航菜单,代码如下:
<!-- 这是标题 --> <div class="col-md-12" style="text-align:center"> <h1>爱嗨哟——折腾和分享技术</h1> </div> <!-- 这是导航菜单 --> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- 下面这段是适应小屏幕的 --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand active" href="#">首页</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class=""><a href="#" target="_blank">菜单 <span class="sr-only">(current)</span></a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li>我在右边</li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>
内容部分使用bootstrap的jumbrton(大屏幕)列表显示内容,代码如下:
<div class="jumbotron"> <h1>这里是文章的标题</h1> <p>这里是文章内容</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">显示详细信息按钮</a></p> </div>
最后说下,网址是:http://www.aihaiyo.com
相关推荐
JavaWeb旅游网站——BootStrap响应式布局 环境: mysql 8.0 jdk 1.8 tomcat 9 redis 2.9.8 主要功能:用户登录、用户注册、修改密码、旅游路线搜索、旅游线路收藏、线路收藏排行榜
前端框架利器——bootstrap
很多bootstrap布局样式。很多bootstrap布局样式。很多bootstrap布局样式。
bootstrap布局设计器
疯狂前端开发讲义——jQuery+AngularJS+Bootstrap前端开发实战
BootStrap布局常用控件整合分享。
bootstrap布局可视化可拖拽
uniapp期末web移动静态小程序app作业开发,完全手敲,利用bootstrap布局搞定uniapp期末web移动静态小程序app作业开发,完全手敲,利用bootstrap布局搞定uniapp期末web移动静态小程序app作业开发,完全手敲,利用...
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
jQuery Bootstrap网格布局和列表布局切换代码
bootstrap前端框架教程.zip 1.引入Bootstrap CDN ...5.Bootstrap的网格系统 6.控件 7.插件 8.UI编辑器 9.Bootstrap HTML编码规范 10.CSS编码规范 Less入门文档 使用CSS字体图标 script属性 Bootstrap的全局显示设置
Bootstrap响应式布局
李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记 李炎恢Bootstrap讲义笔记
这个里面 包含整个bootstrap源程序 你所需要的都在了、里面....教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
bootstrap离线手册 根据官方更新日期为:2014年5月20日 的网页制作 使用方法进bootcss\v3.bootcss.com\index.htm查看 完全离线
以bootstrap完成的响应式星巴克网站源码,本网站也是借鉴成品网站完成,仅供开发人员下载学习,如用作商业用途,本人概不负责。
bootstrap 编程练习(参考代码)。内容管理系统类的bootstrap布局的。