BootStrap表单控件之文本域textarea

2024-09-27 19:55:47

1.运行效果如图所示

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>表单控件——文本域textarea</title>
  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet"
  href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">
  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet"
  href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
  integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
  crossorigin="anonymous">
</head>
<body>
  <form role="form">
    <!-- 单选 -->
    <div class="form-group">
      <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
    </div>
  </form>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  crossorigin="anonymous"></script>
</body>
</html>

以上所述是小编给大家介绍的BootStrap表单控件之文本域textarea，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

全面解析Bootstrap表单使用方法（表单控件）

一.输入框input 单行输入框,常见的文本输入框,也就是input的type属性值为text. 在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"] (其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. 为了让控件在各种表单风格中样式不出错,需要添加类名".form-con
全面解析Bootstrap表单使用方法（表单控件状态）

一.焦点状态焦点状态是通过伪类":focus"来实现.Bootstrap框架中表单控件的焦点状态删除了outline的默认样式,重新添加阴影效果. <form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="
BootStrap表单控件之复选框checkbox和单选择按钮radio

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--复选框checkbox和单选择按钮radio</title> <!-- 最新版本
BootStrap 表单控件之单选按钮水平排列

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--单选按钮水平排列</title> <!-- 最新版本的 Bootstrap 核心
BootStrap表单控件之文本域textarea

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件--文本域textarea</title> <!-- 最新版本的 Bootstrap
Bootstrap表单控件学习使用

Bootstrap表单控件的学习使用,供大家参考,具体内容如下输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据. Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.email.url.search.tel 和 color. <form role="form"&
Bootstrap表单控件使用方法详解

表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content=&q
Bootstrap所支持的表单控件实例详解

Bootstrap所支持的表单控件如下所示: Bootstrap 支持最常见的表单控件,主要是 input.textarea.checkbox.radio 和 select. 输入框(Input) 最常见的表单文本字段是输入框 input.用户可以在其中输入大多数必要的表单数据.Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text.password.datetime.datetime-local.date.month.time.week.number.e
javascript表单控件实例讲解

本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下实例一:遍历表单的所有控件 <script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<e
Angular 表单控件示例代码

本文将介绍 Angular Template-driven 表单中,常用控件的使用.涉及的表单控件如下: text number radio select (基本类型) select (对象) multi select cascading select (级联操作) checkbox (boolean) multi checkbox 表单的局部效果数据接口 export interface User { name: string; // 名字 age?: number; // 年龄 gende
JS模拟并美化的表单控件完整实例

本文实例讲述了JS模拟并美化的表单控件效果实例.分享给大家供大家参考.具体如下: 这里演示使用JS美化并模拟网页表单控件,十分漂亮的表单效果,使用时可以将代码内的JS保存为文件, 方便调用,使用方法:WellForm(element) //element 为表单元素. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-like-table-control-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

BootStrap表单控件之文本域textarea

相关推荐

随机推荐