1 Bootstrap 3 Technologie Informacyjne Literatura:Bootstrap. Praktyczne projekty, M. Kortas, Wyd. Helion, 2016
2 Bootstrap Frontendowy, darmowy framework na licencji MIT. Zbudowany na preprocesorze LESS. Charakteryzuje go bogaty pakiet UI, oraz responsywna siatka zaprojektowana wg koncepcji Mobile-First. Framework korzysta z JS, dzięki czemu możliwa jest obsługa m.in. okien modalnych, dropdown, sliderów. Wsparcie IE 8+. Licencja Apache 2. Specyfikacja, tutorial i przykłady znajdują się na stronie: Zalety dwunastkolumnowa siatka z możliwością zagnieżdżania kolumn, pełna responsywność, komponenty HTML i JS, współpraca z preprocesorami LESS i SASS Wady: strony mają podobny wygląd, nadmiarowość kodu
3 Bootstrap Istnieją dwa sposoby pracy z Boostrapem: Pobranie pliku ze strony Po rozpakowaniu pliku otrzymujemy trzy katalogi: ccc/js/fonts. Następnie tworzymy plik z rozszerzeniem html i wklejamy do niego poniższy szablon: Bootstrap title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"></span> <span class='tr'><meta http-equiv="Content-type" content="text/html; charset=ISO "> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></span> <span class='tr'>tresc </body> </html></span> <span class='tr'>Wykorzystanie zewnętrznych serwerów, które udostępnią pliki Bootstrap. Zaletą takiego podejścia jest zmniejszenie obciążenie naszego serwera i przyspieszenie działania strony. W pliku umieszczamy poniższe odwołania:</span> <span class='tr'><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></span> <span class='tr'>Kodowanie dla polskich znaków,</span> <span class='tr'>przy zapisie pliku wybrać opcje utf-8</span> { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.pl/11845827/66/images/3/Bootstrap+Istniej%C4%85+dwa+sposoby+pracy+z+Boostrapem%3A.jpg", "name": "Bootstrap Istnieją dwa sposoby pracy z Boostrapem:", "description": "Pobranie pliku ze strony http://getbootstrap.com/getting-started/. Po rozpakowaniu pliku otrzymujemy trzy katalogi: ccc/js/fonts. Następnie tworzymy plik z rozszerzeniem html i wklejamy do niego poniższy szablon: Bootstrap title></p> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- Box Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Sign In</h3>
</div>
<div class="modal-body">
<form action="https://slidepptx.com/login" method="post">
<div class="form-group form-group-lg">
<label class="sr-only" for="email">Email</label>
<input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" />
</div>
<div class="form-group form-group-lg">
<label class="sr-only" for="password">Password</label>
<input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<div class="form-group form-group-lg">
<div class="checkbox">
<label class="form-checkbox">
<input type="checkbox" name="remember" value="1" />
<i class="form-icon"></i> Remember Password </label>
<label class="pull-right"><a href="https://slidepptx.com/forgot">Forgot Password?</a></label>
</div>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign In</button>
</form>
<hr style="margin-top: 15px;" />
<a href="https://slidepptx.com/login/google" class="btn btn-lg btn-google btn-block"><i class="fa fa-google"></i> Login with Google</a>
</div>
</div>
</div>
</div>
<!-- Box Footer -->
<div class="footer-container" style="background: #fff;display: block;padding: 10px 0 20px 0;margin-top: 30px;">
<div class="footer-container-inner">
<footer id="footer" class="container">
<div class="row">
<div class="bottom-footer">
<div class="container">
Copyright © 2024 SLIDEPPTX.COM. All rights reserved.
</div>
<hr />
</div>
</div>
<div class="row">
<!-- Block footer -->
<section class="block col-md-4 col-xs-12 col-sm-3" id="block_various_links_footer">
<h4>Information</h4>
<ul class="toggle-footer" style="">
<li><a href="https://slidepptx.com/about">About Us</a></li>
<li><a href="https://slidepptx.com/privacy">Privacy Policy</a></li>
<li><a href="https://slidepptx.com/term">Terms and Conditions</a></li>
<li><a href="https://slidepptx.com/copyright">Copyright</a></li>
<li><a href="https://slidepptx.com/contact">Contact Us</a></li>
</ul>
</section>
<!-- /Block footer -->
<section id="social_block" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Follow us</h4>
<ul>
<li class="facebook">
<a target="_blank" href="" title="Facebook">
<i class="fa fa-facebook-square"></i> <span>Facebook</span>
</a>
</li>
<li class="twitter">
<a target="_blank" href="" title="Twitter">
<i class="fa fa-twitter-square"></i> <span>Twitter</span>
</a>
</li>
<li class="google-plus">
<a target="_blank" href="" title="Google Plus">
<i class="fa fa-plus-square"></i> <span>Google Plus</span>
</a>
</li>
</ul>
</section>
<!-- Block Newsletter module-->
<div id="newsletter" class="col-md-4 col-xs-12 col-sm-3 block">
<h4>Newsletter</h4>
<div class="block_content">
<form action="https://slidepptx.com/newsletter" method="post">
<div class="form-group">
<input id="newsletter-input" type="text" name="email" size="18" placeholder="Entrer Email" />
<button type="submit" name="submit_newsletter" class="btn btn-default">
<i class="fa fa-location-arrow"></i>
</button>
<input type="hidden" name="action" value="0">
</div>
</form>
</div>
</div>
<!-- /Block Newsletter module-->
</div>
</footer>
</div>
</div>
<!-- #footer -->
<script>
$(function () {
$("#document_search").autocomplete({
source: function (request, response) {
$.ajax({
url: "https://slidepptx.com/suggest",
dataType: "json",
data: {
term: request.term
},
success: function (data) {
response(data);
}
});
},
autoFill: true,
select: function (event, ui) {
$(this).val(ui.item.value);
$(this).parents("form").submit();
}
});
});
$(document).ready(function() {
$(".doc-share-btn").click(function() {
var urlshare = $(this).attr('data-share-url');
window.open('http://www.facebook.com/sharer.php?u=' + urlshare, '_blank');
});
});
function download_submit() {
$('#download_form').submit();
}
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-106734935-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
