bootstrap obrazu
cel
W tym tutorialu omówimy trzy klasy Bootstrap 3, aby dodać styl do zdjęć. Będziemy także dyskutować o treści reaguje obrazu Bootstrap 3 Nie.
Styl Ogólny
Zanim omówimy definicję szczególnego stylu klasy obrazu Bootstrap 3 oferty, zobaczymy obrazy definicji ogólnego stylu bootstrapu 3 oferty.
img {
border: 0;
}
Jest to pierwszy obraz zdefiniowane reguły CSS znalezionych w CSS 3, Bootstrap podczas renderowania obraz używany do usuwania granicy.
Następnie, w zapytaniach mediach drukowanych, postanowienia tych zasad.
img {
page-break-wewnątrz: unikać;
}
img {
! Max-width: 100% ważne;
}
page-break-wewnątrz: unikać, unikać podziałów stron w obrazie.
! Max-width: 100% ważne ; obraz zdefiniowany styl jest oczywiste. Nawet wówczas, gdy stosuje się go do pomiaru szerokości obrazu poza pojemnika, może być ograniczona do wyświetlania pojemnika. Jest! Ważne stosowany w połączeniu z innymi stylami do pokrycia wszelkich szkód wyrządzonych tym stylu. Zdarza się, że deweloperzy chcą styl lepsze wsparcie dla urządzeń mobilnych przyjazny renderowania obrazu, będzie wykorzystywać te dwa szczególne zasady.
Istnieje również inna reguła dla obrazu
img {
vertical-align: middle;
}
Ze względu na tę zasadę, to obraz będzie wyśrodkowany pionowo w dz lub innych elementów. Jak pokazano w poniższych przykładach.
Przykłady
<Html>
<Head>
<Title> Bootstrap 3 świadczonych Przykłady image </ title>
<Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Style>
body {
padding: 50px
}
.mdl {
background-color: srebrny;
padding: 7px
}
</ Style>
<! - HTML5 Shim odpowiedzi. js wsparcia IE8 HTML5 oryginalne i mediów zapytania. ->
<- UWAGA :! reagować. Jeśli poprzez file: // Patrz strona js nie zadziała. ->
<! - [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<P class = "mdl"> <img src = "icon-default-screenshot.png"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy NIBH euismod tincidunt ut laoreet Dolore magna aliquam erat volutpat. </ P>
<! - JQuery (plugin JavaScript dla Bootstrap jest konieczne --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Zawierać wszystkie skompilowany plug-in (patrz niżej), lub jeśli jest to konieczne, to jeden plik ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
Kliknij tutaj, aby zobaczyć demo online
Należy pamiętać, że jeśli chcesz wyśrodkować obraz w pionie w zależności od kontekstu, potrzeba dodatkowych stylów.
specjalne stylu
Bootstrap 3 oferuje trzy klasy obraz z wyraźnym stylu dla renderingu.
img zaokrąglone
Można użyć tej klasy do przeniesienia obrazu z zaokrąglonymi narożnikami. Aby to osiągnąć, Bootstrap zapewnia img zaokrąglone klasę. Klasa styl zdefiniowany następująco
.img zaokrąglone {
border-radius: 6px;
}
Dlatego jest właściwość border-radius do 6 z wartości pikseli wykorzystywanych do określenia istotnych filet obrazu. Poniższy przykład ilustruje dwa tego samego obrazu, pierwszy obraz bez img zaokrąglone klasy, drugi obraz z klasą img zaokrąglone. Należy zauważyć, że drugi obraz jest zaokrąglony. Możesz kliknąć tutaj, aby zobaczyć przykłady internetowych .
Przykłady
<Html>
<Head>
<Title> Bootstrap 3 zaokrąglone narożniki świadczonych Przykłady image </ title>
<Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Style>
body {
padding: 50px
}
</ Style>
<! - HTML5 Shim odpowiedzi. js wsparcia IE8 HTML5 oryginalne i mediów zapytania. ->
<- UWAGA :! reagować. Jeśli poprzez file: // Patrz strona js nie zadziała. ->
<! - [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "zaokrąglone-corner-images.png" alt = "obraz z zaokrąglonymi narożnikami">
<Img src = "zaokrąglone-corner-images.png" alt = "obraz z zaokrąglonymi narożnikami" class = "img zaokrąglone">
<! - JQuery (plugin JavaScript dla Bootstrap jest konieczne --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Zawierać wszystkie skompilowany plug-in (patrz niżej), lub jeśli jest to konieczne, to jeden plik ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
img-miniatur
Jest to kolejny Bootstrap klasy CSS 3, które dodać do obrazu miniatury. Kod klasy jest pokazany poniżej
.img-miniatur {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1,428571429;
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
-webkit-przejście: wszystkie 0.2s łatwość-in-out;
Przejście: wszystkie 0.2s łatwość-in-out;
}
Oto przykład tej klasy. Możesz kliknąć tutaj, aby zobaczyć demo online .
Przykłady
<Html>
<Head>
<Title> Bootstrap 3 miniatur </ title>
<Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Style>
body {
padding: 50px
}
</ Style>
<! - HTML5 Shim odpowiedzi. js wsparcia IE8 HTML5 oryginalne i mediów zapytania. ->
<- UWAGA :! reagować. Jeśli poprzez file: // Patrz strona js nie zadziała. ->
<! - [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "image-with-thumbnail.png" alt = "obraz bez rogach miniatury">
<Img src = "image-with-thumbnail.png" alt = "obraz z narożników miniatur" class = "img-miniaturkę">
<! - JQuery (plugin JavaScript dla Bootstrap jest konieczne --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Zawierać wszystkie skompilowany plug-in (patrz niżej), lub jeśli jest to konieczne, to jeden plik ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
img-circle
Za pomocą właściwości border-radius, Bootstrap 3 tworzy okrągły obraz prezentowany. img-circle kod klasy CSS w następujący sposób
.img-circle {
border-radius: 50%;
}
Kliknij tutaj, aby zobaczyć przykłady internetowych . Poniżej screeny i kod.
Przykłady
<Html>
<Head>
<Title> Bootstrap 3 okrągłe image </ title>
<Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Style>
body {
padding: 50px
}
</ Style>
<! - HTML5 Shim odpowiedzi. js wsparcia IE8 HTML5 oryginalne i mediów zapytania. ->
<- UWAGA :! reagować. Jeśli poprzez file: // Patrz strona js nie zadziała. ->
<! - [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "image-with-circle.png" alt = "obraz bez kształcie okręgu">
<Img src = "image-with-circle.png" alt = "obraz z okręgu kształtu" class = "img-circle">
<! - JQuery (plugin JavaScript dla Bootstrap jest konieczne --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Zawierać wszystkie skompilowany plug-in (patrz niżej), lub jeśli jest to konieczne, to jeden plik ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
responsive obrazu
Bootstrap 3 nie zapewniają gotowych reagujących obrazów. Należy dodać img reagujący klasę, aby reagować na obrazie. Klasa kodu CSS poniżej.
.img reagujący {
display: block;
height: auto;
max-width: 100%;
}
Definiuje ona obrazy muszą być wyświetlane jako elementu blokowego, wysokość tej samej wysokości obrazu, maksymalna szerokość obrazu wynosi 100%, w zależności od obrazu, aby ograniczyć urządzenie, do którego jest on prezentowany.
Aby obraz o odpowiedź domyślną, można dodać kod do CSS img {}.
Przykłady wykorzystania tej klasy, jak następuje. Możesz kliknąć tutaj, aby zobaczyć demo online .
Przykłady
<Html>
<Head>
<Title> Bootstrap 3 Responsive image </ title>
<Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Style>
body {
padding: 50px
}
img {
margin-bottom: 30px
}
</ Style>
<! - HTML5 Shim odpowiedzi. js wsparcia IE8 HTML5 oryginalne i mediów zapytania. ->
<- UWAGA :! reagować. Jeśli poprzez file: // Patrz strona js nie zadziała. ->
<! - [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "image-with-circle.png" alt = "nie reagującego funkcji obrazu">
<Img src = "image-with-circle.png" alt = "reagującego z funkcją obrazu" class = "img-reagujący">
<! - JQuery (plugin JavaScript dla Bootstrap jest konieczne --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Zawierać wszystkie skompilowany plug-in (patrz niżej), lub jeśli jest to konieczne, to jeden plik ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
Ten dodano do reakcji obrazu metody mają swoje ograniczenia.
Odpowiednio, w dużym ekranie i urządzeń mobilnych (mniejszy rozmiar ekranu może spowodować problemy z wydajnością) załadowany równie dużych obrazów o wysokiej rozdzielczości. Ponieważ przeglądarka zostanie załadowany przed CSS i JS fabrycznie obrazy w połączeniach sieciowych niskich obrotach, może również powodować problemy z wydajnością. Wyobraź sobie, że masz duży obraz i konkretnego obiektu w nim, podczas przeglądania obrazów zapisanych w urządzeniu mobilnym, obraz zostanie zredukowana do mniejszej wersji obrazu będzie wyglądać tak mały problem, o którym mowa kierunku sztuki ,
Deweloperzy mają pochodzić z rozwiązań w celu przezwyciężenia tych ograniczeń. Przekonamy się Marc Grabanski i Christopher Schmitt Przykład HiSRC się. To jest obraz automatycznie tworzy niskie, średnie, wysokie rozdzielczości wersję wtyczki jQuery, w zależności od wersji przedstawionej przez rozdzielczość wyświetlanego obrazu i przepustowości urządzenia.
Za nami reaguje poradnik obrazu, omówimy wszystkie te metody w szczegółach.
Kliknij tutaj, aby zobaczyć demo online . Kod jest w następujący sposób:
Przykłady
<Html>
<Head>
<Title> Bootstrap 3 czułe obraz używając HiSRC instancji </ title>
<Meta name = "rzutni" content = "width = device-width, initial-scale = 1.0">
<! - Bootstrap ->
<link href = "dist / css / bootstrap.min.css" rel = "stylesheet" media "ekran" =>
<Style>
body {
padding: 50px
}
img {
margin-bottom: 30px
}
</ Style>
<! - HTML5 Shim odpowiedzi. js wsparcia IE8 HTML5 oryginalne i mediów zapytania. ->
<- UWAGA :! reagować. Jeśli poprzez file: // Patrz strona js nie zadziała. ->
<! - [If lt IE 9]>
<Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<Script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<Img src = "5216852563_eca0af1b0d_m.jpg" data-1x = "5216852563_eca0af1b0d.jpg" data-2x = "5216852563_90c3f9c402_o.jpg" class = "hisrc" />
<! - JQuery (plugin JavaScript dla Bootstrap jest konieczne --->
<Script src = "https://code.jquery.com/jquery.js"> </ script>
<! - Zawierać wszystkie skompilowany plug-in (patrz niżej), lub jeśli jest to konieczne, to jeden plik ->
<Script src = "dist / js / bootstrap.min.js"> </ script>
<Script>
$ (Document) .ready (function () {
$ ( ". Hisrc") hisrc () .;
});
</ Script>
<P> Zdjęcie dzięki uprzejmości: /http://www.flickr.com/photos/cubagallery/ </ p>
</ Body>
</ Html>