AngularJS y W3.CSS

¿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:

  1. w3-container: agrega un relleno izquierdo y derecho de 16px a cualquier elemento HTML.
  2. w3-fontSize: w3-tiny, w3-small, w3-medium (predeterminado), w3-large, w3-xlarge, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo.
  3. w3-text: proporciona características css como alineación, opacidad, sombra, efectos especiales.
  4. 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:

Página de inicio de sesión de GeeksforGeeks

Publicación traducida automáticamente

Artículo escrito por abhishekkharmale y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *