a propos bootstrap

**hedibox** · 24/10/2013, 19h39

est ce qu' en peut faire un long texte puis afficher par exemple le quatre premier ligne et un petit bouton ou lien _lire la suite_ pour faire comme collapse et afficher le reste du texte

**rodolphebrd** · 24/10/2013, 20h24

Bonjour,

merci de vous exprimer dans un langage intelligible et de poster votre code et une page en ligne.

**papajoker** · 24/10/2013, 20h43

Quel rapport avec Bootstrap ?

Tu n'as qu'a limiter la taille de ton div a 6em(par exemple) overflow:hidden
et a l'appuis sur le btn, tu mets height:auto !

**hedibox** · 25/10/2013, 00h44

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@extends('layouts.default')

@section('content')

<center> <h1> All Shows  </h1> </center> <br/>

@include('common.link')

<div class="col-sm-9 rtop">
  @foreach($shows as $show)
  <div class="list-group list-group-item" id="11" >
  	<h3>&nbsp;{{$show->name}}</h3>
		<div class="well well-lg">{{$show->description}}</div> //<<< ici 
		@if(isset($episode_info))
			<p><b>Episode link :</b> 
				@foreach($episode_info as $episodeLink)
					@if($episodeLink->id == $show->episode_id)
						{{$episodeLink->videoLink}}
					@endif
				@endforeach
			</p>
		@endif
		@if(isset($image_info)) 
		<p><b>Image :</b>
				@foreach($image_info as $imageLink)
					@if($imageLink->id == $show->slider_id && $imageLink->imageLink != 'no Link')
						<a id="example2" href={{"../images/".$imageLink->imageLink}}>
							<img src={{"../images/".$imageLink->imageLink}}  width="100" height="auto" />
						</a>
					@endif
				@endforeach
			</p>
		@endif
		<b>State :</b>@if($show->state == '0') 
						hide
					  @else
					  	show 
					  @endif
	 <p align="right"> <small style="color:gray;">{{$show->created_at}}</small>&nbsp;|&nbsp;<small style ="color:gray;">{{$show->updated_at}}</small> </p>

	 {{ HTML::linkRoute('update_Show', 'Update', array($show->id))}} | 
	 {{ Form::open(array('url' => 'show/delete', 'method' => 'delete', 'style'=>'display: inline;')) }}
	 {{ Form::token() }}
		{{ Form::hidden('id', $show->id) }}
		{{ Form::submit('delete',array('class'=>'btn btn-lg btn-info'))}}
		{{ Form::close()}}
  </div> 
  @endforeach
</div>

@stop

**hedibox** · 25/10/2013, 01h00

Envoyé par papajoker

Quel rapport avec Bootstrap ?

Tu n'as qu'a limiter la taille de ton div a 6em(par exemple) overflow:hidden
et a l'appuis sur le btn, tu mets height:auto !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@extends('layouts.default')
 
@section('content')
 
<center> <h1> All Shows  </h1> </center> <br/>
 
@include('common.link')
 
<script>
function showAll(){
document.getElementsById('showAll').height="auto";
}
</script>
 
<div class="col-sm-9 rtop">
  @foreach($shows as $show)
  <div class="list-group list-group-item" id="11" >
  	<h3>&nbsp;{{$show->name}}</h3>
		<div  id="showAll">{{$show->description}}<a Href="javascript:showAll()">lire la suite</a></div>
		@if(isset($episode_info))
			<p><b>Episode link :</b> 
				@foreach($episode_info as $episodeLink)
					@if($episodeLink->id == $show->episode_id)
						{{$episodeLink->videoLink}}
					@endif
				@endforeach
			</p>
		@endif
		@if(isset($image_info)) 
		<p><b>Image :</b>
				@foreach($image_info as $imageLink)
					@if($imageLink->id == $show->slider_id && $imageLink->imageLink != 'no Link')
						<a id="example2" href={{"../images/".$imageLink->imageLink}}>
							<img src={{"../images/".$imageLink->imageLink}}  width="100" height="auto" />
						</a>
					@endif
				@endforeach
			</p>
		@endif
		<b>State :</b>@if($show->state == '0') 
						hide
					  @else
					  	show 
					  @endif
	 <p align="right"> <small style="color:gray;">{{$show->created_at}}</small>&nbsp;|&nbsp;<small style ="color:gray;">{{$show->updated_at}}</small> </p>
 
	 {{ HTML::linkRoute('update_Show', 'Update', array($show->id))}} | 
	 {{ Form::open(array('url' => 'show/delete', 'method' => 'delete', 'style'=>'display: inline;')) }}
	 {{ Form::token() }}
		{{ Form::hidden('id', $show->id) }}
		{{ Form::submit('delete',array('class'=>'btn btn-lg btn-info'))}}
		{{ Form::close()}}
  </div> 
  @endforeach
</div>
 
@stop

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#showAll{
height: 10em;
overflow: hidden;
}

est ce que c'est juste ?

**papajoker** · 25/10/2013, 02h04

Envoyé par hedibox

est ce que c'est juste ?

trop dur a tester ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
function showAll(){
        $('#showAll').css({'height':'auto','overflow':'visible'});
        $('#showAll a').hide();
}
</script>
<style>
        #showAll{ position:relative; height: 1.2em; overflow: hidden; }
        #showAll a { position:absolute; bottom:0; right:0; background-color: #fff ;}
</style>
<div id="showAll">Le design sur le Web ne cesse d'évoluer avec les nouvelles fonctionnalités CSS ainsi que le développement des nouveaux périphériques : smartphones, tablettes, etc.
Comme pour les vêtements, les voitures ou tout autre produit faisant appel à un designer, l'apparence de vos sites Web suit des effets de mode. La tendance actuelle pousse les designers à utiliser ce que l'on appelle le « flat design ».
Le « flat design » n'a pas de définition à proprement parler. Il s'agit plutôt d'association de termes par rapport à la tendance actuelle. Cette tendance consiste à exclure du design tout ce qui est superflu. 
 
<a href="javascript:showAll()">lire la suite</a>
</div>