Pregunta:

Fecha: 25-09-2017 13:53:05 (En Español)

¿Quisiera saber como hacer un resultado como un post igual que taringa?[No resuelta]

Esta es la imagen

Esta es una imagen algo así quiero hacer quien me ayuda? Etiquetas: MySQL - PHP Votos: 0 - Respuestas: 3 - Vistas: 13 Compartir en: Google Facebook Twitter LinkedIn Link

Respuestas:

2

Ernesto Peimbert Karma: 5332

Fecha: 26-09-2017 10:17:36 Hola Jose,
No es muy clara tu pregunta pero parece que lo que quieres hacer es un widget.
No entiendo si preguntas acerca de código o cómo desplegarlo. Votos: 2 - Link respuesta
3

Walter Sánchez Karma: 6600
Fecha: 26-09-2017 13:11:40
Hola
No esta muy clara tu consulta.
En caso que te refieras al diseño como el que expones

Creo que lo podrías realizar con Bootstrap utilizando Media object/Objetos multimedia y adaptándolo a tus necesidades

Tal componente de Bootstrap seria algo como:

Código de ejemplo:
```
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>
```
Saludos
Votos: 3 - Link respuesta

Walter Sánchez Karma: 6600

Fecha: 26-09-2017 15:57:22 Te dejo un ejemplo práctico y funcional realizado con Bootstrap 3 utilizando Media object/Objetos multimedia como te había mencionado anteriormente.

En este caso me estoy refiriendo solamente al Front-end

El codigo:
Archivo: index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>POSTs con Bootstrap 3</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <!-- Bootstrap 3.3.7 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>
        .media{
            border-bottom-style: solid;
            border-width: 1px;
            border-bottom-color: lightgrey;
            padding-bottom: 5px
        }
        .media-object {
            width: 80px;
            height: 64px
        }
    </style>
</head>
<body>
<div class="container">
    <h3 class="text-center text-primary">Posts</h3>

    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" src="http://www.phpcentral.com/img/flags_logo/logo_phpcentralcom_ar.png" alt="Noticias">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">PHP Central la comunidad más grande</h4>
            <p class="text-muted "><span class="glyphicon glyphicon-globe"></span> Noticias <span class="glyphicon glyphicon-time"></span> 20 m <span class="glyphicon glyphicon-comment"></span> 5 <span class="glyphicon glyphicon-user"></span> Walter</p>
        </div>
    </div>

    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" src="https://images.pexels.com/photos/170811/pexels-photo-170811.jpeg" alt="Automovil">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">BMW el automovil mas deseado</h4>
            <p class="text-muted "><span class="glyphicon glyphicon-info-sign"></span> Info <span class="glyphicon glyphicon-time"></span> 2 h <span class="glyphicon glyphicon-comment"></span> 15 <span class="glyphicon glyphicon-user"></span> Walter</p>
        </div>
    </div>

    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" src="https://images.pexels.com/photos/50614/pexels-photo-50614.jpeg" alt="Movil">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Actualizar Android</h4>
            <p class="text-muted "><span class="glyphicon glyphicon-phone"></span> Movil <span class="glyphicon glyphicon-time"></span> 54 m <span class="glyphicon glyphicon-comment"></span> 4 <span class="glyphicon glyphicon-user"></span> Fernando</p>
        </div>
    </div>

    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" src="https://images.pexels.com/photos/53435/tree-oak-landscape-view-53435.jpeg" alt="Imagenes">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Paisajes Asombrosos</h4>
            <p class="text-muted "><span class="glyphicon glyphicon-picture"></span> Imagenes <span class="glyphicon glyphicon-time"></span> 2 h <span class="glyphicon glyphicon-comment"></span> 16 <span class="glyphicon glyphicon-user"></span> Ernesto</p>
        </div>
    </div>

    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" src="http://php.net/manual/es/images/c0d23d2d6769e53e24a1b3136c064577-php_logo.png" alt="Offtopic">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Creacion index como Taringa</h4>
            <p class="text-muted "><span class="glyphicon glyphicon-asterisk"></span> Offtopic <span class="glyphicon glyphicon-time"></span> 20 m <span class="glyphicon glyphicon-comment"></span> 3 <span class="glyphicon glyphicon-user"></span> José Serrano</p>
        </div>
    </div>

    <div class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img class="media-object" src="http://www.trucsweb.com/documents/images/2015/bootstrap4.png" alt="Noticias">
            </a>
        </div>
        <div class="media-body">
            <h4 class="media-heading">Lanzamiento de Bootstrap 4</h4>
            <p class="text-muted "><span class="glyphicon glyphicon-globe"></span> Noticias <span class="glyphicon glyphicon-time"></span> 4 h <span class="glyphicon glyphicon-comment"></span> 35 <span class="glyphicon glyphicon-user"></span> Kapry</p>
        </div>
    </div>

</div>
</body>
</html>
</body>
</html>

Imagen comparativa

El codigo es a modo de ejemplo, tienes que adaptarlo a tus necesidades.

Espero que te sirva como punto de partida.

Saludos Votos: 3 - Link respuesta

Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión

frjcbbae garagebible.com

Pregunta:

¿Quisiera saber como hacer un resultado como un post igual que taringa?[No resuelta]

Respuestas:

secciones

La comunidad

Mi Cuenta