两周“学会”bootstrap搭建一个移动站点

  一直想着用bootstrap搭建网站,它的自适应、元素封装完善、现成的Glyphicons字体图标,省去很多的css、js、ui的工作,可以快速搭建一个客户需要的站点。ytkah自己有一些div+css的基础知识,所以上手bootstrap相对会比较快一些,从入手到完成项目只用了两周“学会”bootstrap搭建一个企业站,中间还有其他的一些事需要处理。当然做得比较粗糙,效果图在文章尾部。

  国内的企业站一般都喜欢这样的版式:头部导航、幻灯片banner、次导航、文章列表、tag标签、转化引导、主业分类、团队介绍、联系方式,那我们就按这样设计

  1.首先我们先引用css和js,用大的body把页面包围起来

  2.用导航条<nav></nav>设计一个头部导航,用栅格系统column分为散列,左侧是主页小房子标志,中间是logo,右侧是下拉导航菜单

  3.用carousel.js做一个幻灯片轮播,如果想加入手势滑动效果参考ytkah之前写的这篇文章:Bootstrap幻灯轮播如何支持触屏左右滑动手势?

  4.用栅格系统column做次导航作为品牌专区、主业分类、底部转化引导

  5.用ul - li 做一个文章列表

  6.用标签页nav-tabs和按钮btn做一个tags标签栏、团队介绍

  ytkah力求用最少的组件来完成设计,如果想做得更美观可以加入更多的组件。网站的栏目页和文章页需要的功能相对少一些,头部、底部、转化引导等可以共用,做得更快。

时间: 2024-11-06 10:51:38

两周“学会”bootstrap搭建一个移动站点的相关文章

最近找到了一个免费的python教程,两周学会了python开发【内附学习视频】

原文链接:https://blog.csdn.net/weixin_41052734/article/details/86528541 最近找到了一个免费的python教程,两周学会了python开发.推荐给大家,希望召集更多的朋友一起学习python. 最近开始整理python的资料,博主建立了一个qq群,希望给大家提供一个交流的同平台: 78486745 ,欢迎大家加入共同交流学习. 本套教程学习时间15天 第一阶段(1-8天) 该阶段我们正式进入Python这门语言的学习,首先通过了解Py

如何搭建一个 HTTPS 服务端

关于 HTTPS 的基本原理大家都已经不再陌生,今天和大家说说如何搭建一个支持 HTTPS 的服务端. 服务端的 HTTPS HTTPS 已经几乎成为了当前互联网推荐的通信方式,它能最大化保证信息传输的安全,从去年苹果的强制 HTTPS ,到如今各大网站都支持了 HTTPS.它会越来越普及. 之前写过几篇关于 HTTPS 原理的文章,有用户留言希望了解一些如何在服务端搭建 HTTPS 服务的内容,这次就和大家聊聊这个话题. SSL 证书 搭建一个 HTTPS 站点,第一步要做的就是申请 SSL

[bootstrap] 打造一个简单的系统模板(1) 左侧折叠菜单

1. 前言 最近需要做一个后台管理系统,我打算使用bootstrap弄一个好看的后台模板.网上的好多模板我觉的css和js有点重. 于是就打算完全依靠bootstrap搭建一个属于自己的模板. 首先从左侧的折叠菜单开始.看图. 2. CSS 代码 以下是自定义的css代码,由于系统是内部使用,所以优先考虑chrome,firefox 不考虑IE了. #main-nav { margin-left: 1px; } #main-nav.nav-tabs.nav-stacked > li > a {

项目经理怎么在两周内熟悉一个项目的业务?

项目经理空降到一个进行中的项目,怎么在两周内熟悉一个项目的业务? 四步帮你解决:明确项目业务目标,了解系统功能模块,弄清系统核心业务流程,多使用系统. 一.明确项目业务目标 明确项目业务目标,也就是了解客户为什么要建设这个项目,客户想通过这个项目解决哪些业务问题?从哪里了解这个信息?渠道很多:如果前任项目经理还在,可以直接问前任项目:如果项目资料齐全,可以查阅项目资料:如果商务清楚,可以问商务:如果前面的渠道不通,也可以直接请教客户:甚至可从公司竞争对手的竞品介绍里了解.此任务第一周完成. 二.

两周撸一个微信小程序

利益相关 无 说明 该小程序代码已开源,点击可查看源码,可随意 star.也可以先扫描下方的小程序码直接体验. 写在前面 前段时间写了一个简单的小程序 QuietWeather,源码在这里,具体实现相关可查看这篇文章:两天撸一个天气应用微信小程序.但是这个 小程序 和 QuietWeather 完全不是一个数量级的.so,该文章梳理内容会有那么一点儿多,想跳过的可以直接拉到最下面... 这里先上效果图,感兴趣的也可以 查看源码 .实际体验可扫描??上面的小程序码. 效果图 PC 开发者工具录制,

Orchard官方文档翻译(六) 建立你的第一个Orchartd站点

让我们开始 该主题内容已在Orchard1.8Release版本下测试通过. 这里通过向导式的教程来告诉大家Orchard的功能如何使用.如果你是第一次使用Orchard,该文档就是为你而准备的! Orchard使用从零开始 对于初次接触Orchard的你来说,这里就是你的圣地,因为你能在这里找到最新的Orchard资源. Orchard 初学者 Orchard CodePlex - Orchard代码库 Orchard 讨论区 - 关于Orchard讨论区 Orchard 文档 - 与Orch

Dubbo入门---搭建一个最简单的Demo框架

Dubbo背景和简介 Dubbo开始于电商系统,因此在这里先从电商系统的演变讲起. 单一应用框架(ORM) 当网站流量很小时,只需一个应用,将所有功能如下单支付等都部署在一起,以减少部署节点和成本. 缺点:单一的系统架构,使得在开发过程中,占用的资源越来越多,而且随着流量的增加越来越难以维护 垂直应用框架(MVC) 垂直应用架构解决了单一应用架构所面临的扩容问题,流量能够分散到各个子系统当中,且系统的体积可控,一定程度上降低了开发人员之间协同以及维护的成本,提升了开发效率. 缺点:但是在垂直架构

一周学会go语言并应用 by王奇疏

<一周学会go语言并应用> by王奇疏 ( 欢迎加入go语言群: 218160862 , 群内有实践) 零.安装go语言,配置环境及IDE 这部分内容不多,请参考我的这篇安装环境<安装go语言,配置环境及IDE> 日常只有2条命令: go   run  文件路径/xxx.go go   build  文件路径/xxx.go 第一节.语法 1)注释:   // 单行注释      /* 多行注释 *// 2). [基本语法] 一个go语言程序项目只能有1个 package main包

从DNS基础到在CentOS6.5上&ldquo;玩着&rdquo;搭建一个支持正向、反向解析的&ldquo;

1.什么是DNS? (Domain Name System)域名系统. DNS其实实现的功能很简单也很有效,它能够让用户可以不用记得那些经常要访问服务器的ip地址,直接要你输入类似拼音格式的就可以访问到那些数字串的ip地址.假设以61.120.155.14(举个例子),我们总是用这些数字进行网页服务器的访问岂不是很蛋疼,毕竟很多人还是对文字甚至拼音字母更容易让正常人记忆.这就是DNS的功能. 当然,它不仅能把那些你输入的拼音字母转换成ip地址的数字串,它还支持把那些数字串转换成你想访问的实际的网