2024年-BootStrap入门学习PPT（精编）.ppt

Boostrap组件——按钮式下拉菜单分裂式按钮下拉菜单相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。**Boostrap组件——按钮式下拉菜单按钮尺寸按钮式下拉菜单适用所有尺寸的按钮。.btn-lg：应用于大型按钮。.btn-sm：应用于小型按钮。.btn-xs：应用于超小型按钮。向上弹出式菜单给父元素添加.dropup类就能使触发的下拉菜单朝上方打开。**Boostrap组件——输入框组描述通过在文本输入框input前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为.input-group赋予.input-group-addon类，可以给.form-control的前面或后面添加额外的元素。只支持文本输入框input，不能用于select和textarea元素。尺寸为.input-group添加相应的尺寸类，其内部包含的元素将自动调整自身的尺寸。尺寸类包括：.input-group-lg和.input-group-sm**Boostrap组件——输入框组作为额外元素的按钮为输入框组添加按钮需要额外添加一层嵌套，不是.input-group-addon，而是添加.input-group-btn来包裹按钮元素。由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。**Boostrap组件——输入框组作为额外元素的按钮式下拉菜单**Boostrap组件——标签页概述Bootstrap中的导航组件都依赖同一个.nav类，.active状态类也是共用的。普通标签页(选项卡)注意.nav-tabs类依赖.nav基类，用在ul元素上。.active是状态类样式，用在li元素上。**Boostrap组件——标签页胶囊式标签页HTML标记相同，但使用.nav-pills类：胶囊是标签页也是可以垂直方向堆叠排列的。只需添加.nav-stacked类。两端对齐在大于768px的屏幕上，通过.nav-justified类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。**Boostrap组件——标签页禁用的链接对任何导航组件（标签页、胶囊式标签页），都可以添加.disabled类，从而实现链接为灰色且没有鼠标悬停效果。链接功能不受到影响。这个类只改变a的外观，不改变功能。可以自己写JavaScript禁用这里的链接。**Boostrap组件——标签页带下拉菜单的标签页**Boostrap组件——导航条默认导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。**Boostrap组件——导航条品牌图标将导航条内放置品牌标志的地方替换为img元素即可展示自己的品牌图标。由于.navbar-brand已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些CSS代码从而覆盖默认设置。**Boostrap组件——导航条表单将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的视口（viewport）中呈现折叠状态。使用对齐选项可以规定其在导航条上出现的位置。使用.navbar-left或.navbar-right可以实现表单左对齐或右对齐。**Boostrap组件——导航条按钮对于不包含在form中的button元素，加上.navbar-btn后，可以让它在导航条里垂直居中。**Boostrap组件——导航条文本把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用p标签。**Boostrap组件——导航条导航条定位添加?.navbar-fixed-top?类可以让导航条固定在顶部。添加.navbar-fixed-bottom类可以让导航条固定在底部。还可包含一个?.container?或?.container-fluid?容器，从而让导航条居中，并在两侧添加内补（padding）。添加.navbar-inverse可以实现反色导航条**Bootstrap组件——路径导航路径导航在一个带有层次的导航结构中标明当前页面的位置。各路径间的分隔符已经自动通过CSS的:before和content属性添加了。给ol或ul添加.