网站技术架构图,西宁网站建设维护,淮安市广德育建设网站,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最后
最后送大家一句司汤达的一句话一个人只要强烈地坚持不懈地追求他就能达到目的。
