bootstarp 使用例子~~
来源：互联网 发布：天津网络作家排行榜 编辑：程序博客网 时间：2024/05/17 10:03
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%><h2> 表单相关样式 <small> 输入框篇</small></h2><p class="text-info">向父 <form> 元素添加 role="form"。</p><p class="text-info">把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。</p><p class="text-info">向所有的文本元素 <input>、 <textarea> 和 <select> 添加 class .form-control。</p><pre><form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">聚焦</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> </div> </div></form> </pre><div style="width: 900px"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">聚焦</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> <span class="help-block">placeholder属性写提示</span> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label"> 禁用 </label> <div class="col-sm-10"> <input class="form-control" id="disabledInput" type="text" placeholder="该输入框禁止输入..." disabled> <span class="help-block">disabled属性禁用输入框</span> </div> </div> <div class="form-group has-success"> <label class="col-sm-2 control-label" > 输入成功 </label> <div class="col-sm-10"> <input type="text" class="form-control" > <span class="help-block">div has-success样式,可配合Jquery动态改变样式</span> </div> </div> <div class="form-group has-warning"> <label class="col-sm-2 control-label" for="inputWarning"> 输入警告 </label> <div class="col-sm-10"> <input type="text" class="form-control input-lg" id="inputWarning"> <span class="help-block">div has-success样式 输入框input-lg(大输入框)样式</span> </div> </div> <div class="form-group has-error"> <label class="col-sm-2 control-label input-sm" for="inputError"> 输入错误 </label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> <span class="help-block">div has-has-error样式 输入框input-sm(小)样式</span> </div> </div> </form></div><p class="text-danger">样式支持火狐,谷歌,IE9+浏览器(IE8往下版本Html5兼容性差)</p><p class="text-info">表单的大小基于表单父容器的大小自动变化</p><br><p class="text-info">内联表单:</p><form class="form-inline" role="form"> <div class="row"> <div class="form-group form-group-sm col-md-4"> <label class="col-md-4 control-label">聚焦:</label> <div class="col-md-8"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> </div> </div> <div class="form-group form-group-sm col-md-4"> <label class="col-md-4 control-label">聚焦:</label> <div class="col-md-8"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> </div> </div> <div class="form-group form-group-sm col-md-4"> <label class="col-md-4 control-label">聚焦:</label> <div class="col-md-8"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> </div> </div> </div> <br> <div class="row"> <div class="form-group form-group-sm col-md-4"> <label class="col-md-4 control-label">聚焦:</label> <div class="col-md-8"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> </div> </div><div class="form-group form-group-sm col-md-4"> <label class="col-md-4 control-label">聚焦:</label> <div class="col-md-8"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> </div> </div><div class="form-group form-group-sm col-md-4"> <label class="col-md-4 control-label">聚焦:</label> <div class="col-md-8"> <input class="form-control" id="focusedInput" type="text" placeholder="该输入框获得焦点..."> </div> </div> </div></form><hr><h2> 表单相关样式 <small> 按钮篇</small></h2><p class="text-danger">.btn 的元素都会继承圆角灰色按钮的默认外观</p><pre> <button type="button" class="btn btn-default">默认按钮btn-default</button></pre><button type="button" class="btn btn-default btn-lg">默认按钮 btn-default 大按钮btn-lg </button><button type="button" class="btn btn-primary btn-sm">原始按钮 btn-primary 小按钮btn-sm</button><button type="button" class="btn btn-success btn-xs">成功按钮 btn-success 超小按钮btn-xs</button><button type="button" class="btn btn-info btn-block">信息按钮 btn-info 块样式btn-block</button><button type="button" class="btn btn-warning active">警告按钮 btn-warning 已激活active</button><button type="button" class="btn btn-danger disabled">危险按钮 btn-danger 已禁用disabled</button><button type="button" class="btn btn-link">链接按钮 btn-link</button><br><br><br><p>自定义图标按钮颜色 大小, 请访问:<a target="_blank" href="http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm">bootstarp图标大全</a></p><pre> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-search"> Search</span> </button></pre><button type="button" class="btn btn-default btn-xs" style="color: rgb(235, 140, 145); "> <span class="glyphicon glyphicon-search" > </span> Search</button><button type="button" class="btn btn-default btn-sm" style="text-shadow: black 5px 3px 3px;"> <span class="glyphicon glyphicon-user"></span> User</button><button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-facetime-video"></span> video</button><hr><h2> 表单相关样式 <small> datepicker篇</small></h2><link rel="stylesheet" href="include/bootstarp_datepicker/css/bootstrap-datepicker3.css" type="text/css"><script type="text/javascript" src="include/bootstarp_datepicker/js/bootstrap-datepicker.js"></script><script type="text/javascript" src="include/bootstarp_datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script><p>导入js bootstrap-datepicker.js,bootstrap-datepicker.zh-CN.min.js和CSS bootstrap-datepicker3.css</p><p>添加如下代码</p><pre><link rel="stylesheet" href="include/bootstarp_datepicker/css/bootstrap-datepicker3.css" type="text/css"><script type="text/javascript" src="include/bootstarp_datepicker/js/bootstrap-datepicker.js"></script><script type="text/javascript" src="include/bootstarp_datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script><div class="input-group input-group-sm col-md-3"> <input type="text" class="form-control datepicker" > <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div><script type="text/javascript"> $(function() { //框架初始化 $(".datepicker").datepicker({ language : 'zh-CN',//选择中文显示， 默认英文 autoclose : true,//自动关闭 todayHighlight : true,//本日日期高亮 format : 'yyyy-mm-dd'//日期格式 初始化时请根据自己需求更改 }); });</script></pre><p class="text-danger">效果如下：</p><link rel="stylesheet" href="include/bootstarp_datepicker/css/bootstrap-datepicker3.css" type="text/css"><script type="text/javascript" src="include/bootstarp_datepicker/js/bootstrap-datepicker.js"></script><script type="text/javascript" src="include/bootstarp_datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script><div class="input-group input-group-sm col-md-3"> <input type="text" class="form-control datepicker" > <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div><script type="text/javascript"> $(function() { $(".datepicker").datepicker({ language : 'zh-CN', autoclose : true, todayHighlight : true, format : 'yyyy-mm-dd' }); });</script><br><br><br><br><br><br><br><br><br><br><br><br><br><br><hr> 0 0
- bootstarp 使用例子~~
- bootstarp-table 使用总结
- bootstarp
- angularJs和bootstarp的使用
- Bootstarp 基础 栅格系统的使用
- bootstarp table 使用及常用参数说明
- bootstarp modal 上使用bootstarp-datepicker 年月下拉框点击不出来的bug
- springMVC文件上传带进度条前端使用html5+bootstarp
- bootstarp入门二（基本控件的使用）
- daterangepicker bootstarp 日期范围选择控件使用注意事项
- 基于bootstarp的分页插件jquery.twbsPaginationwbst的使用
- bootstarp组件
- bootstarp-sass
- bootstarp入门
- bootstarp table
- bootstarp-按钮
- Bootstarp和Raphael
- Bootstrap学习--认识Bootstarp
- KMP
- PHP函数体外的变量无法传入内函数使用原因
- 【功不唐捐，修德为富】创业咨询微访谈实录
- C++学习笔记——sizeof 用法的详细总结及例程
- hdu1542 Atlantis--扫描线
- bootstarp 使用例子~~
- 初学C#的编程小白创建计算器全过程并恶意卖萌（2之增加卖萌元素）
- Petetson算法解决进程竞争问题
- 自己总结的Android开源项目及库（github一个作者的总结）
- bzoj3670 noi2014动物园（kmp）
- Android Camera OMXCameraAdapter.cpp初始化分析
- 数据仓库维度建模
- B-tree数算法分析
- 数据规整化：清理、转换、合并、重塑
