{"id":7594,"date":"2020-06-18T16:51:06","date_gmt":"2020-06-18T16:51:06","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7594"},"modified":"2020-06-18T16:51:06","modified_gmt":"2020-06-18T16:51:06","slug":"campos-tipo-radio-como-botones-en-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/","title":{"rendered":"Campos tipo \u00abradio\u00bb como botones en Bootstrap 4"},"content":{"rendered":"

Hace poco agregu\u00e9 un art\u00edculo sobre como convertir las casillas de verificaci\u00f3n (checkboxes) en botones usando Bootstrap 4<\/a>. Ahora quiero comentar algo muy parecido pero para los \u00abradio buttons\u00bb. Los campos de tipo \u00abradio\u00bb se pueden convertir f\u00e1cilmente en botones usando Bootstrap 4.<\/p>\n

Los estilos por defecto que tienen los navegadores para los campos de tipo \u00abradio\u00bb son muy sosos.<\/p>\n

Bootstrap lo sabe y por eso ha creado una forma r\u00e1pida para darle un formato mucho mejor para su visualizaci\u00f3n.<\/p>\n

En este caso, los inputs tipo \u00abradio\u00bb se pueden mostrar como un bot\u00f3n.<\/p>\n

La idea que voy a ilustrar en este art\u00edculo es crear varios elementos o inputs de tipo \u00abradio\u00bb dentro de un grupo de botones y, a su vez, cada elemento dentro de una etiqueta label con estilos de bot\u00f3n.<\/p>\n

Bootstrap nos permite agregar una estructura HTML para conseguir un dise\u00f1o m\u00e1s apreciable para esto.<\/p>\n

En el ejemplo en funcionamiento vas a poder ver un grupo de botones que tienen la funcionalidad de inputs tipo \u00abradio\u00bb en el que estoy mostrando 2 opciones que permiten al usuario indicar si es \u00abHombre\u00bb o \u00abMujer\u00bb. Recuerda que los elementos tipo \u00abradio\u00bb no son como las casillas de verificaci\u00f3n. En este caso, solo se puede seleccionar una opci\u00f3n del grupo de opciones.<\/p>\n

F\u00edjate en el c\u00f3digo siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"btn-group btn-group-toggle"<\/span> data-toggle=<\/span>"buttons"<\/span>><\/span>\n    <label<\/span><\/a> class<\/span>=<\/span>"btn btn-info"<\/span>><\/span>\n        <input<\/span><\/a> type<\/span>=<\/span>"radio"<\/span> name<\/span>=<\/span>"gender"<\/span> value<\/span>=<\/span>"hombre"<\/span> autocomplete=<\/span>"off"<\/span>><\/span> Hombre\n    <\/<\/span>label<\/span><\/a>><\/span>\n    <label<\/span><\/a> class<\/span>=<\/span>"btn btn-info active"<\/span>><\/span>\n        <input<\/span><\/a> type<\/span>=<\/span>"radio"<\/span> name<\/span>=<\/span>"gender"<\/span> value<\/span>=<\/span>"mujer"<\/span> autocomplete=<\/span>"off"<\/span>><\/span> Mujer\n    <\/<\/span>label<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
C\u00f3digo simple para conseguir como resultado:<\/p>\n
\"Radio<\/p>\n
Por defecto (sin Bootstrap), se ver\u00eda de la siguiente forma en Google Chrome:<\/p>\n
\"Radios<\/p>\n
F\u00edjate que gran diferencia! y con tan poco c\u00f3digo.<\/p>\n
En el ejemplo en funcionamiento, he agregado un bot\u00f3n \u00abEnviar\u00bb como extra para que puedas enviar la selecci\u00f3n al servidor. La opci\u00f3n seleccionada es recibida con PHP en el servidor.<\/p>\n
Conclusi\u00f3n<\/h2>\n
La diferencia en cuanto a aspecto es notable. Creo que vale la pena usarlo. Programar los elementos de tipo \u00abradio\u00bb para que funcionen as\u00ed costar\u00eda mucho tiempo de programaci\u00f3n. Por suerte, Bootstrap ya lo ha hecho por ti, \u00bfporqu\u00e9 no aprovecharlo?<\/p>\n
Debido a que son botones, tambi\u00e9n se les puede cambiar el tama\u00f1o, colores, bordes, etc. Ver tutorial sobre botones en Bootstrap 4<\/a>.<\/p>\n
Recuerda que los elementos tipo radio solo se puede seleccionar una de las opciones propuestas. Si necesitas hacer lo mismo con varias opciones seleccionadas deber\u00e1s ver el tutorial para las casillas de verificaci\u00f3n.<\/p>\n
Para usar estas opciones tienes que tener bien instalado Bootstrap conjuntamente con sus archivos correspondientes para que pueda funcionar el JavaScript.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Convierte f\u00e1cilmente los elementos tipo \u00abradio\u00bb en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar el sexo a un usuario.<\/p>\n","protected":false},"author":1,"featured_media":7597,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-7594","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"\nCampos tipo "radio" como botones en Bootstrap 4 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Convierte f\u00e1cilmente los elementos tipo "radio" en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar el sexo a un usuario.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Campos tipo "radio" como botones en Bootstrap 4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Convierte f\u00e1cilmente los elementos tipo "radio" en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar el sexo a un usuario.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-18T16:51:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/\",\"name\":\"Campos tipo \\\"radio\\\" como botones en Bootstrap 4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png\",\"datePublished\":\"2020-06-18T16:51:06+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Convierte f\u00e1cilmente los elementos tipo \\\"radio\\\" en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar el sexo a un usuario.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png\",\"width\":250,\"height\":250,\"caption\":\"Campos de tipo radio como botones en Bootstrap 4\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Campos tipo \u00abradio\u00bb como botones en Bootstrap 4\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Campos tipo \"radio\" como botones en Bootstrap 4 - Jose Aguilar Blog","description":"Convierte f\u00e1cilmente los elementos tipo \"radio\" en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar el sexo a un usuario.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Campos tipo \"radio\" como botones en Bootstrap 4 - Jose Aguilar Blog","og_description":"Convierte f\u00e1cilmente los elementos tipo \"radio\" en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar el sexo a un usuario.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2020-06-18T16:51:06+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/","url":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/","name":"Campos tipo \"radio\" como botones en Bootstrap 4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png","datePublished":"2020-06-18T16:51:06+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Convierte f\u00e1cilmente los elementos tipo \"radio\" en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar el sexo a un usuario.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/06\/radio-como-un-boton-en-bootstrap-4.png","width":250,"height":250,"caption":"Campos de tipo radio como botones en Bootstrap 4"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/campos-tipo-radio-como-botones-en-bootstrap-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Campos tipo \u00abradio\u00bb como botones en Bootstrap 4"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7594"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7594\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7597"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7594"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}