¿Qué es W3.CSS?
- W3.CSS es un marco moderno con capacidad de respuesta incorporada y fácil de aprender y usar en comparación con otros marcos CSS.
- Su objetivo es acelerar y simplificar el desarrollo web y admitir dispositivos receptivos modernos como dispositivos móviles, computadoras portátiles, tabletas y computadoras de escritorio.
- W3.CSS fue diseñado para ser una alternativa de alta calidad a Bootstrap y está desarrollado por w3school.com
¿Qué es angularJS?
- AngularJS es un marco estructural para aplicaciones web dinámicas que amplía HTML con nuevos atributos.
- Proporciona pruebas automatizadas y es perfecto para aplicaciones de una sola página.
- Le da a la aplicación una estructura limpia y mucho código reutilizable.
La parte más importante de W3.CSS:
- w3-container: agrega un relleno izquierdo y derecho de 16px a cualquier elemento HTML.
- w3-fontSize: w3-tiny, w3-small, w3-medium (predeterminado), w3-large, w3-xlarge, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo.
- w3-text: proporciona características css como alineación, opacidad, sombra, efectos especiales.
- w3-input: proporciona tarjetas de entrada, etiquetas de colores, borde, casilla de verificación, botones de radio, etc.
Ejemplo:
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <style> .pad { margin: 0 0 0 0; } </style> </head> <body ng-app="myApp" ng-controller="myCtrl"> <div class="w3-container "> <p class="w3-jumbo w3-text-green pad" align="center">GeeksforGeeks</p> <p class="w3-large w3-text-green pad" align="center" > A computer science portal for geeks</p> <form> <h3 align="center" > Enter user details </h3> <label>First Name:</label> <input class="w3-input w3-border w3-round-xxlarge" type="text" ng-model="fname" placeholder="First Name"></br> <label>Last Name:</label> <input class="w3-input w3-border w3-round-xxlarge" type="text" ng-model="lname" placeholder="Last Name"></br> <label>Email id:</label> <input class="w3-input w3-border w3-round-xxlarge" type="email" ng-model="mail" placeholder="Email id"></br> <label>Password:</label> <input class="w3-input w3-border w3-round-xxlarge" type="password" ng-model="pass" placeholder="Password"></br> <p align="center"> <button class="w3-btn w3-green w3-ripple " > Save </button></p> </form> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.fname = "Fname"; $scope.lname = "Lname"; $scope.mail = "user@geeksforgeeks.com"; $scope.pass = "password"; }); </script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhishekkharmale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA