第二百四十节，Bootstrap巨幕页头缩略图和警告框组件

Bootstrap巨幕页头缩略图和警告框组件

学习要点：

　　1.巨幕组件

　　2.页头组件

　　3.缩略图组件

　　4.警告框组件

本节课我们主要学习一下 Bootstrap 的四个组件功能：巨幕组件、页头组件、缩略图组 件和警告框组件。

一．巨幕组件

巨幕组件主要是展示网站的关键性区域。

在固定的范围内，有圆角，整个巨幕以最大宽度为1140px显示

container样式class类，写在

里，设置固定布局div最大宽度为1140px(Bootstrap)
jumbotron样式class类，写在
里，设置巨幕组件div样式,展示网站的关键性区域(Bootstrap)

<div class="container">
    <div class="jumbotron">
        <h2>网站标题h2>
        <p>这是一个学习性的网站！p>
        <p><a href="#" class="btn btn-default">更多内容a>p>
    div>
div>

100%全屏，没有圆角，巨幕最外层以100%宽度显示，巨幕内区域以最大宽度为1140px显示【最流行做法】

<div class="jumbotron">
    <div class="container">
        <h2>网站标题h2>
        <p>这是一个学习性的网站！p>
        <p><a href="#" class="btn btn-default">更多内容a>p>
    div>
div>

二．页头组件

增加一些空间

page-header样式class类，写在页头区域元素里，设置页头区域样式(Bootstrap)

<div class="page-header">
    <h1>大标题
        <small>小标题small>
    h1>
div>

三．缩略图组件

缩略图配合响应式

thumbnail样式class类，写在外层

元素里，设置响应式图片区域(Bootstrap)

<div class="container">                                 
    <div class="row">                                   
        <div class="col-xs-6 col-md-3 col-sm-4">        
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
            div>
        div>
        <div class="col-xs-6 col-md-3 col-sm-4">        
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
            div>
        div>
        <div class="col-xs-6 col-md-3 col-sm-4">        
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
            div>
        div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
            div>
        div>
    div>
div>

屏幕大于或等于992


屏幕大于或等于768


屏幕小于768

响应式微缩图，图文并茂自定义内容

caption样式class类，写在响应式图片区域

里面与img同级的
元素里，设置响应式图片区域里的图文内容样式(Bootstrap)

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
                <div class="caption">
                    <h3>图文并茂h3>
                    <p>这是一个图片结合文字的缩略图p>
                    <p><a href="#" class="btn btn-default">进入a>p>
                div>
            div>
        div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
                <div class="caption">
                    <h3>图文并茂h3>
                    <p>这是一个图片结合文字的缩略图p>
                    <p><a href="#" class="btn btn-default">进入a>p>
                div>
            div>
        div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
                <div class="caption">
                    <h3>图文并茂h3>
                    <p>这是一个图片结合文字的缩略图p>
                    <p><a href="#" class="btn btn-default">进入a>p>
                div>
            div>
        div>
        <div class="col-xs-6 col-md-3 col-sm-4">
            <div class="thumbnail">
                <img src="img/pic.png" alt="">
                <div class="caption">
                    <h3>图文并茂h3>
                    <p>这是一个图片结合文字的缩略图p>
                    <p><a href="#" class="btn btn-default">进入a>p>
                div>
            div>
        div>
    div>
div>

屏幕大于或等于992


屏幕大于或等于768


屏幕小于768

四．警告框组件

警告框组件是一组预定义消息。

alert样式class类，写在

元素里，声明一个警告信息框(Bootstrap)
alert-success样式class类，写在
元素里，设置警告信息框绿色(Bootstrap)
alert-info样式class类，写在
元素里，设置警告信息框蓝色(Bootstrap)
alert-warning样式class类，写在
元素里，设置警告信息框橙色(Bootstrap)
alert-danger样式class类，写在
元素里，设置警告信息框红色(Bootstrap)

<div class="alert alert-success">Bootstrapdiv>
<div class="alert alert-info">Bootstrapdiv>
<div class="alert alert-warning">Bootstrapdiv>
<div class="alert alert-danger">Bootstrapdiv>

带关闭的警告框

close样式class类，写在警告信息框里的

Python

相关

学习《Python编程从入门到实践》PDF+代码训练

python-----面向对象简单理解

python多线程控制

Sublime 的安装、汉化、配置、Python环境和插件

python——time strftime() 函数表示当地时间

python 初识函数

python 函数对象 嵌套 闭包

Python栈溢出——设置python栈大小

python-面向对象-01课堂笔记

python爬虫

Python 之父的解析器系列之五：左递归 PEG 语法

Python 为了提升性能，竟运用了共享经济

标签