<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <h2>Bootstrap 3 Well</h2> <div class="well well-sm">Small Well</div> <div class="well">Normal Well</div> <div class="well well-lg">Large Well</div> </div> <!-- Ekran boyutu info --> <div id="screenInfo">Screen width: Detecting...</div> <!-- Breakpoint Panel --> <div id="breakpointPanel" class="panel panel-info"> <div class="panel-heading">Screen width changed</div> <div class="panel-body" id="panelMessage">New width: ...</div> </div>

.well { color: white; transition: background 0.3s ease; } /* Arka plan renkleri */ @media (max-width: 767px) { .well { background: #d9534f; } } @media (min-width: 768px) and (max-width: 991px) { .well { background: #f0ad4e; } } @media (min-width: 992px) and (max-width: 1199px) { .well { background: #5bc0de; } } @media (min-width: 1200px) { .well { background: #5cb85c; } } /* Ekran bilgisi üst orta */ #screenInfo { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: white; padding: 10px 15px; border-radius: 5px; z-index: 9999; } /* Panel üst orta */ #breakpointPanel { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 9999; display: none; width: 300px; }

var currentBreakpoint = ""; function getBreakpoint(width) { if (width < 768) return "XS"; else if (width >= 768 && width < 992) return "SM"; else if (width >= 992 && width < 1200) return "MD"; else return "LG"; } function updateScreenInfo() { var width = $(window).width(); var newBreakpoint = getBreakpoint(width); $('#screenInfo').text('Screen width: ' + newBreakpoint + ' - ' + width + 'px'); if (newBreakpoint !== currentBreakpoint) { currentBreakpoint = newBreakpoint; showBreakpointPanel(newBreakpoint); } } function showBreakpointPanel(breakpoint) { $('#panelMessage').text('New screen width: ' + breakpoint); $('#breakpointPanel').fadeIn(); setTimeout(function () { $('#breakpointPanel').fadeOut(); }, 3000); } $(document).ready(function () { currentBreakpoint = getBreakpoint($(window).width()); updateScreenInfo(); }); $(window).resize(function () { updateScreenInfo(); });