8、导航条

BootStrap已经提供了完整的导航条实例,通常情况下,我们仅需进行简单修改即可使用。

帮助手册位置:组件-------导航条

9、轮播图

BootStrap已经提供了完整的轮播图实例,通常情况下,我们仅需进行简单修改即可使用。

帮助手册位置:JavaScript插件--- Carousel

轮播图DIV的定时换图属性:

data-interval="毫秒值"

注意:多个轮播图必须修改轮播图的ID

10、排版-对齐方式

BootStrap提供统一的排版方式设置,方便开发人员对内容板式进行调整

帮助手册位置:全局CSS样式----排版----对齐

会将元素内所有的内容都进行排版设置

.text-left

使元素内容靠左显示

.text-center

使元素内容居中显示

.text-right

使元素内容靠右显示

示例:

效果:

11、表单元素

BootStrap同样提供了丰富的表单控件供开发人员来选择。

帮助手册位置:全局CSS样式-----表单

示例1:基本实例

效果1:

示例2:表单名和表单输入项共用一行

效果2:

示例3:校验状态-出错样式

效果3:

12、分页条

BootStrap为我们还准备了分页条的样式组件。

帮助手册位置:组件-----------分页

示例1:

效果1:

示例2:

效果2:(鼠标放入禁用按钮,鼠标变为禁用)

6_bootstrap之导航条|轮播图|排版|表单元素|分页的更多相关文章

  1. Vue(小案例_vue+axios仿手机app)_首页(底部导航栏+轮播图+九宫格)

    ---恢复内容开始--- 一.前言                        1.底部导航(两种做法)                                         2.轮播图 ...

  2. 【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)

    首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...

  3. Flask实战第53天:cms编辑轮播图功能完成

    后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...

  4. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

  5. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  6. 原生js写一个无缝轮播图插件(支持vue)

    轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

  7. BootStrap学习(三)——重写首页之导航栏和轮播图

    1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...

  8. 带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  9. angularjs1 自定义轮播图(汉字导航)

    本来想用swiper插件的,可是需求居然说要汉字当导航栏这就没办法了,只能自己写. directive // 自定义指令: Home页面的轮播图 app.directive('swiperImg', ...

随机推荐

  1. 解决IE6中img标签 图片透明

    <!--[if IE 6]> <script type="text/javascript"> function correctPNG() { for (va ...

  2. SpringBoot 使用 EhCache2.x 缓存(三十一)

    SpringBoot 使用 EhCache2.x 缓存入门很简单,废话少说上干货: 1.在POM.xml中增加jar包 <!--开启 cache 缓存--> <dependency& ...

  3. Protel画完原理图检查的时候出现了这些错误 #1 Error Multiple Net Identifiers

    Error Report For : Documents\Sheet1.Sch 24-Aug-2009 14:58:43 #1 Error Multiple Net Identifiers : She ...

  4. Cobbler自动化安装部署系统

    自动化安装部署 https://www.cnblogs.com/nulige/p/6796593.html PXE+Kickstart工作原理 pxe+kickstart工作流程 网卡上的pxe芯片有 ...

  5. window XP下 php5.5+mysql+apache2+phpmyadmin安装

    学了将近大半年的php了,还没有装过独立的php环境,一直用的集成的.记得刚学时,一头雾水,不知改怎么搭配环境,就觉得特别复杂,各种看不懂,今天还是自己在XP环境下搭配了一个. 首先,下载php5.5 ...

  6. 归并排序(C语言)

    合并排序(MERGE SORT)是又一类不同的排序方法,合并的含义就是将两个或两个以上的有序数据序列合并成一个新的有序数据序列,因此它又叫归并算法. 它的基本思想就是假设数组A有N个元素,那么可以看成 ...

  7. 注册dll文件

    1.打开"开始-运行-输入regsvr32 XXX.dll",回车即可 2.win7 64位旗舰版系统运行regsvr32.exe提示版本不兼容 在运行regsvr32.exe的时 ...

  8. Linux下sniffer实现(转)

    转发网址:https://blog.csdn.net/eqiang8271/article/details/8489769 //Example 1. #include <stdio.h> ...

  9. 【转】ubuntu 12.04 下 Vim 插件 YouCompleteMe 的安装

    原文网址:http://www.cnblogs.com/jostree/p/4137402.html 作者:jostree 转载请注明出处 http://www.cnblogs.com/jostree ...

  10. Application共享数据

    1.Application与Session的区别 Application对象:实现程序级别的数据共享. Session对象:实现会话级别的数据共享. 当需要整个程序级别的共享信息时,可以使用Appli ...