ch06-导航、导航条组件.pptVIP

第6章导航、导航条组件输入框组件导航组件（nav）导航条组件（navbar）教学内容一．输入框组件输入框组件文本输入框就是可以在input元素前后加上文字或按钮，可以实现对表单控件的扩展。1.在左侧添加文字divclass=input-groupspanclass=input-group-addon@/spaninputtype=textclass=form-control/div2.在右侧添加文字divclass=input-groupinputtype=textclass=form-controlspanclass=input-group-addon@163.com/span/div输入框组件3.在两侧添加文字divclass=input-groupspanclass=input-group-addon$/spaninputtype=textclass=form-controlspanclass=input-group-addon.00/span/div4.设置尺寸，另外三种分别是默认、xs、smdivclass=input-groupinput-group-lg输入框组件5.左侧使用复选框和单选框divclass=input-groupspanclass=input-group-addoninputtype=checkbox/spaninputtype=textclass=form-control/divdivclass=input-groupspanclass=input-group-addoninputtype=radio/spaninputtype=textclass=form-control/div6.左侧使用按钮divclass=input-groupspanclass=input-group-btnbuttontype=buttonclass=btnbtn-default按钮/button/spaninputtype=textclass=form-control/div输入框组件7.左侧使用下拉菜单或分列式divclass=input-groupspanclass=input-group-btnbuttonclass=btnbtn-defaultdropdown-toggledata-toggle=dropdown下拉菜单spanclass=caret/span/buttonulclass=dropdown-menuliclass=dropdown-header网站导航/liliahref=#首页/a/liliahref=#资讯/a/liliclass=dividerahref=#产品/a/liliclass=disabledahref=#关于/a/li/ul/spaninputtype=textclass=form-control/div二．导航组件（nav）导航组件（nav）1.基本选项卡导航?ulclass=navnav-tabs !--类.nav-tabs实现标签的导航-- liclass=activeahref=#首页/a/li !--类.active表示首选状态-- liahref=#产品/a/li liahref=#新闻/a/li liahref=#关于/a/li /ul?2.胶囊式导航 ulclass=navnav-pills?导航组件（nav）3.垂直导航，分隔符：nav-divider?liclass=nav-divider/li?4.自适应导航说明：根据屏幕浏览器的宽度自动改变导航宽度。?ulclass=navnav-tabsnav-justified?5.禁用导航中的项目?liclass=disabledahref=#关于/a/li?导航组件（nav）6.带下拉菜单的导航?ulclass=navnav-tabsnav-justified liclass=activeahref=#首页3/a/li li ahref=#data-toggle=dropdown产品/a ulclass=dropdown-menu liahref=#产品1/a/li liahref=#产品2/a/li liahref=#产品3/a/li liahref=#产品4/a/li /ul /li