HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    
<div ng-app="app" ng-controller="ctrl">
    
    <div class="horizontal-medias">
        <button class="btn btn-default newBtn clearfix">
            <i class="fa fa-plus fa-2x pull-left"></i>
        </button>
        <button ng-repeat="btn in buttons" class="btn btn-default">
            <i class="fa fa-file-word-o fa-2x"></i>
           <div class="flex-group">
                <span>Uzun Dosya Adı 1<br>10 KB</span>
           </div>
        </button>
    </div>
    
</div>
<script>
    angular.module("app",[])
.controller("ctrl",function($scope){
    $scope.buttons = [
        {name:"Dosya Adı 1",class:"fa-file-word-o"},
         {name:"Dosya Adı 1",class:"fa-file-word-o"},
         {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-archive-o"},
         {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-pdf-o"},
         {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-movie-o"},
         {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-powerpoint-o"},
         {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-audio-o"},
         {name:"Çok Çok Uzun Dosya Adı 1",class:"fa-file-image-o"}
        ]
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
.horizontal-medias{
    overflow:auto;height:80px;white-space: nowrap; border:1px solid #f3f3f3;
}
.horizontal-medias button{
    height:50px;
    max-height:50px;
    min-height:50px;
    display: inline-flex;
}
.horizontal-medias button i{
    margin-top:5px;
    margin-right:7px;
}
.horizontal-medias button i,
.horizontal-medias button div.flex-group{
    display: inline-flex;
    text-align:left;
}
.horizontal-medias button:not(.newBtn){
    width:220px;
    max-width:220px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.horizontal-medias::-webkit-scrollbar {
    width: 1em;
    height:9px;
}
 
.horizontal-medias::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
.horizontal-medias::-webkit-scrollbar-thumb {
  background-color: #ccc;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Yatay Dosya Görünümü İkonlu | Horizontal Media View With Icons"
Bootstrap 2.3.2 Snippet by mesutcakir

Related: See More

Questions / Comments:

"Yatay Dosya Görünümü İkonlu | Horizontal Media View With Icons" Bootstrap 2.3.2 Snippet by mesutcakir

Related: See More

Questions / Comments:

"Yatay Dosya Görünümü İkonlu | Horizontal Media View With Icons"
Bootstrap 2.3.2 Snippet by mesutcakir