6_bootstrap之导航条|轮播图|排版|表单元素|分页
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之导航条|轮播图|排版|表单元素|分页的更多相关文章
- Vue(小案例_vue+axios仿手机app)_首页(底部导航栏+轮播图+九宫格)
---恢复内容开始--- 一.前言 1.底部导航(两种做法) 2.轮播图 ...
- 【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)
首先来直接看一下最终的效果吧: 项目地址:https://github.com/xiugangzhang/vip.github.io 在线预览地址:https://xiugangzhang.githu ...
- Flask实战第53天:cms编辑轮播图功能完成
后端逻辑 表单验证, 这里编辑就是和添加的内容一样,所以可以直接继承添加轮播图的表单验证,然后多加一个轮播图的id即可 编辑cmd.forms.py class UpdateBannerForm(Ad ...
- 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍
今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因 前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
- BootStrap学习(三)——重写首页之导航栏和轮播图
1.按钮 1)帮助文档:http://v3.bootcss.com/css/#buttons 2).btn-lg..btn-sm..btn-xs可以设置按钮的不同尺寸 3).active类设置按钮的激 ...
- 带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- angularjs1 自定义轮播图(汉字导航)
本来想用swiper插件的,可是需求居然说要汉字当导航栏这就没办法了,只能自己写. directive // 自定义指令: Home页面的轮播图 app.directive('swiperImg', ...
随机推荐
- thinkphp3.2笔记(2)调试模式,配置项C,创建模块, 四种URL模式,URL生成,跳转
一.调试模式 TP的调试模式其实就控制了TP关于配置信息以及函数的缓存功能 如果开启了调试模式,每次访问项目,Tp都会去加载最新的配置以及函数信息. 如果关闭了调试模式,当tp第一次访问时会降配置以及 ...
- bzoj2152: 聪聪可可 树分治
sb树分治 /************************************************************** Problem: 2152 User: walfy Lang ...
- Spring MVC 实现跨域资源 CORS 请求
说到 AJAX 跨域,很多人最先想到的是 JSONP.的确,JSONP 我们已经十分熟悉,也使用了多年,从本质上讲,JSONP 的原理是给页面注入一个 <script>,把远程 JavaS ...
- UVALive-3268 Jamie's Contact Groups (最大流,网络流建模)
题目大意:你的手机通讯录里有n个联系人,m个分组,其中,有的联系人在多个分组里.你的任务是在一些分组里删除一些联系人,使得每个联系人只在一个分组里并且使人数最多的那个分组人数最少.找出人数最多的那个分 ...
- 将C语言的CRC32 代码转成JAVA的CRC32 代码
public class CustomerCRC32 { private static long[] crc32Table = new long[256]; static { long crcValu ...
- Jenkins无法读取覆盖率报告的解决方法
报错信息如下: log 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 coverage-report: [mkdir] Cre ...
- 利用Sonar定制自定义JS扫描规则(一)——sonar环境搭建
接触sonar已经有段时间了,最早是在一个项目组里面听到这个框架,后来在公司持续集成活动的推动下,也逐渐学习了sonar的具体功能.sonar集成了findbugs,pmd,checkstyle各种静 ...
- MVC项目使用Oracle数据库运行提示:找不到请求的 .Net Framework Data Provider。可能没有安装
MVC项目使用Entity Framework针对Oracle数据库进行开发时,由于Oracle官方网站一般建议开发者在64位操作系统中使用32位ODP.Net进行开发.在进行程序编码的时候不会有问题 ...
- linux下部署tomcat服务器之安装tomcat
下载tomcat压缩包 apache-tomcat-7.0.82.tar.gz 在把包放到linux 的softwore文件夹下 自己选择文件夹 tar -zxvf apache-tomcat-7. ...
- IO的概念
什么是IO: 在内存中存在数据交换的操作都可以认为是IO操作 和终端交互:input print 和磁盘交互:read write 和网络交互:recv send IO密集型程序:在程序执行过程中存在 ...