当前位置: 首页 > news >正文

网站建设 体会宣传彩页设计

网站建设 体会,宣传彩页设计,关键词的优化和推广,wordpress模板文件在哪里目录 前言一#xff0c;组件1.1#xff0c;字体图标1.2#xff0c;下拉菜单组件1.2.1#xff0c;基本下拉菜单1.2.2#xff0c;按钮式下拉菜单 1.3#xff0c;导航组件1.3.1#xff0c;选项卡导航1.3.2#xff0c;胶囊式导航1.3.3#xff0c;自适应导航1.3.4#xff… 目录 前言一组件1.1字体图标1.2下拉菜单组件1.2.1基本下拉菜单1.2.2按钮式下拉菜单 1.3导航组件1.3.1选项卡导航1.3.2胶囊式导航1.3.3自适应导航1.3.4下拉菜单导航1.3.5综合导航栏1.3.6顶部导航栏1.3.7底部导航栏 1.4下拉框1.5搜索框 二分页2.1默认分页2.2翻页2.3对齐翻页 最后 前言 根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片 这一章我们来讲一下一些组件 一组件 1.1字体图标 无处不在的字体图标 如图 它们在APP页面底部、网站导航条、登录页面或注册页面 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodydiv classcontainerdiv!-- 设置图标 --span classglyphicon glyphicon-search aria-hiddentrue/span/div/div /body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /htmlBootstrap框架提供了250多个来自Glyphicon Halflings的字体图标其作用在内联元素上 1.2下拉菜单组件 用于显示链接列表或有上下文的菜单 基本下拉菜单按钮式下拉菜单 1.2.1基本下拉菜单 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head body!-- Single button --div classbtn-groupbutton typebutton classbtn btn-default dropdown-toggle data-toggledropdown aria-haspopuptrue aria-expandedfalseAction span classcaret/span/buttonul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/li !-- roleseparator classdivider 下滑线 --lia href#Separated link/a/li/ul/div /body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.2.2按钮式下拉菜单 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head body!-- Split button --div classbtn-groupbutton typebutton classbtn btn-dangerAction/buttonbutton typebutton classbtn btn-danger dropdown-toggle data-toggledropdown aria-haspopuptrue aria-expandedfalsespan classcaret/spanspan classsr-onlyToggle Dropdown/span/buttonul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离 1.3导航组件 导航可以便于用户查找网站所提供的各种功能服务 选项卡导航胶囊式导航自适应导航下拉菜单导航 1.3.1选项卡导航 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodydiv classcontainerul classnav nav-tabsli classactivea href#个人中心/a/lilia href#商品详情/a/lilia href#我的订单/a/lilia href#联系客服/a/li/ul/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.3.2胶囊式导航 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodydiv classcontainerul classnav nav-pillsli classactivea href#个人中心/a/lilia href#商品详情/a/lilia href#我的订单/a/lilia href#联系客服/a/li/ul/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.3.3自适应导航 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodyul classnav nav-tabs nav-justifiedli classactivea href#首页/a/lilia href#购物车/a/lilia href#我的订单/a/lilia href#联系客服/a/li/ulbrbrul classnav nav-pills nav-justifiedli classactivea href#首页/a/lilia href#购物车/a/lilia href#我的订单/a/lilia href#联系客服/a/li/ul/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html在大于768px的屏幕上通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度在小屏幕上导航呈现堆叠样式 1.3.4下拉菜单导航 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodyul classnav nav-tabs...li rolepresentation classdropdowna classdropdown-toggle data-toggledropdown href# rolebutton aria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#购物车/a/lilia href#我的订单/a/lilia href#联系客服/a/li/ul/li.../ul/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.3.5综合导航栏 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodydiv!-- 综合导航栏 --nav classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapse data-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#Brand/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#Link span classsr-only(current)/span/a/lilia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptrue aria-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --/nav/div/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.3.6顶部导航栏 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodydiv!-- 固定在顶部 --nav classnavbar navbar-default navbar-fixed-topdiv classcontainerul classnav navbar-navli classactivea href#Brand/a/lilia href#Home/a/p/lilia href#Link/a/lilia href#Link/a/li/ul/div/nav/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.3.7底部导航栏 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodydiv!-- 固定在底部 --nav classnavbar navbar-default navbar-fixed-bottomdiv classcontainerul classnav navbar-navli classactivea href#Brand/a/lilia href#Home/a/p/lilia href#Link/a/lilia href#Link/a/li/ul/div/nav/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.4下拉框 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head body!-- 下拉框 --div classdropdownbutton classbtn btn-default dropdown-toggle typebutton iddropdownMenu1 data-toggledropdown aria-haspopuptrue aria-expandedtrueDropdownspan classcaret/span/buttonul classdropdown-menu aria-labelledbydropdownMenu1lia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html1.5搜索框 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodybrbrdiv!-- 搜索框 --div classinput-groupinput typetext classform-control placeholder请输入要搜索的内容span classinput-group-addon百度一下/span/div/divhrdivdiv classinput-groupinput typetext classform-control placeholder请输入要搜索的内容span classinput-group-btnbutton classbtn btn-primary typebutton百度一下/button/span/div/div/body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html二分页 2.1默认分页 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodynav aria-labelPage navigationul classpaginationlia href# aria-labelPreviousspan aria-hiddentruelaquo;/span/a/lilia href#1/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrueraquo;/span/a/li/ul/nav /body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html2.2翻页 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodynav aria-label...ul classpagerlia href#上一页/a/lilia href#下一页/a/li/ul/nav /body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html翻页只能实现上一页和下一页的简单翻页其常用于博客和杂志等简单站点 2.3对齐翻页 !DOCTYPE html html langen headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title测试/titlelink relstylesheet href../css/bootstrap.min.css /head bodynav aria-label...ul classpagerli classpreviousa href#span aria-hiddentruelarr;/span 上一页/a/lili classnexta href#下一页 span aria-hiddentruerarr;/span/a/li/ul/nav /body script src../js/jquery.js/script script src../js/bootstrap.min.js/script /html最后 最后送大家一句司汤达的一句话一个人只要强烈地坚持不懈地追求他就能达到目的。
http://www.sadfv.cn/news/187648/

相关文章:

  • 自助提交网站手机网站设计公司
  • 模仿做网站怎么网络推广
  • 微信公众号登录wordpress网站吗公司网站源码
  • 微商城设计网站建设蛋糕店网站开发策划书
  • 郑州网站建设 论坛硬盘做网站空间
  • 深圳企业公司做网站小米发布会13
  • 在菲律宾做网站推广怎么样源创派网站建设
  • 做自由行的网站好电商网站商品中心设计方案
  • 没有网站也可以做cpawordpress同步twitter
  • 有什么网站可以做婚庆视频素材项目网络图经常被称为什么
  • 清爽网站从化市营销型网站建设
  • 建一个网站大概需要多长时间用阿里云怎么建网站
  • wordpress去除 版权信息怎样做网站的优化工作
  • 河南城乡建设厅网站WordPress报价表
  • 网站建设需要提供什么网站备案号查不到
  • 网站单页做301中国移动网站备案管理系统不能用
  • 做微商怎样加入网站卖东西赚钱wordpress本地安装500
  • 厦门网站建设方案咨询程序员编程培训
  • 做手机网站给我一个网站2021
  • 文化公司做网站交文化事业费吗重庆市建设工程管理协会网站
  • 广州棠下网站建设经典网站欣赏、
  • 网站开发三层结构教育中介公司网站建设费用
  • 个人网站做排名广西建设网站在线服务
  • 在线做简单的网站吗自己来建网站
  • 如何建设一个工业品采购网站重庆建设工程信息网加密狗无法登陆
  • 手机和pc端网站建设郑州最新新闻事件今天
  • 网站建设费用要多少电子商务网站建设合同范本
  • 设计师做兼职的网站有哪些关于推动门户网站建设d
  • 网站开发策划书天津网站制作机玩法部
  • 网站负责人查询重庆网络技术有限公司