11.30课堂笔记、作业

最新推荐文章于 2021-07-08 18:49:33 发布

huqiang0816

最新推荐文章于 2021-07-08 18:49:33 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/huqiang0816/article/details/78680900

版权

11.30课堂笔记

1、bootstrap基础

1.1 简介

HTML5文档类型

Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在项目中的每个页面都要参照下面的格式进行设置。

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

移动设备优先

Bootstrap 3 重写了整个框架，使其一开始就是对移动设备友好的，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

为了确保适当的绘制和触屏缩放，需要在之中添加 viewport 元数据标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Normalize.css

为了增强跨浏览器表现的一致性，使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">
  ...
</div>

.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">
  ...
</div>

1.2栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。

“行（row）”必须包含在 .container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。 Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为.container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了 padding。
栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。

这里写图片描述

列偏移

<div class="row">
    <div class="col-md-8 a">8</div>
    <div class="col-md-3 a col-md-offset-2">3</div>
</div>

列嵌套

<div class="row">
    <div class="col-md-9 a" style="padding: 0;">
    <div class="col-md-4 a">4</div>
    <div class="col-md-4 a">4</div>
    <div class="col-md-4 a">4</div>
</div>

    <div class="col-md-3 a">3</div>
</div>

交换位置

<div class="row">
    <div class="col-md-9 col-md-push-3 a">9</div>
    <div class="col-md-3 col-md-pull-9 a">3</div>
</div>

1.3排版样式

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 行高设置为 1.428(即20px)；

段落元素被设置等于 1/2 行高(即 10px)；颜色被设置为#333。

<p>Bootstrap框架</p>
<p class="lead">Bootstrap框架</p>

标题

创建包含段落突出的文本

<h1>Bootstrap框架</h1>
<h2>Bootstrap框架</h2>
<h3>Bootstrap框架</h3>
<h4>Bootstrap框架</h4>
<h5>Bootstrap框架</h5>
<h6>Bootstrap框架</h6>

从 Firebug 查看元素了解到，Bootstrap 分别对 h1 ~ h6进行了 CSS 样式的重构，并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。

内联元素使用标题字体

<span class="h1">Bootstrap框架</span>

在 h1 ~ h6 元素之间，还可以嵌入一个 small 元素作为副标题，//在标题元素内插入 small 元素

<h1>Bootstrap框架<small>Bootstrap框架</small></h1>
<h2>Bootstrap框架<small>Bootstrap框架</small></h2>
<h3>Bootstrap框架<small>Bootstrap框架</small></h3>
<h4>Bootstrap框架<small>Bootstrap框架</small></h4>
<h5>Bootstrap框架<small>Bootstrap框架</small></h5>
<h6>Bootstrap框架<small>Bootstrap框架</small></h6>

对齐

<p class="text-left">Bootstrap框架</p>
<p class="text-center">Bootstrap框架</p>
<p class="text-right">Bootstrap框架</p>
<p class="text-justify">Bootstrap框架</p>//浏览器支持有问题

列表排版

<ul class="list-unstyled">
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
</ul>
<ul class="list-inline">
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
    <li>Bootstrap框架</li>
</ul>

代码

For example, <code>&lt;section&gt;</code> should be wrapped as inline.
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

1.4表格和按钮

表格

基本表格

<table class="table ">

注：我们可以通过 Firebug 查看相应的 CSS。

条纹状表格

<table class="table table-striped">
//注：表格效果需要基于基本格式.table

带边框的表格

<table class="table table-bordered">

悬停鼠标

<table class="table table-hover">

状态类

<tr class="success">
//注：一共五种不同的样式可供选择。

这里写图片描述

隐藏某一行

<tr class="active sr-only">

响应式表格

在小于768px，为表格加上边框

<table class="table table-responsive">

按钮

可作为按钮使用的标签或元素

转化为普通按钮

<button class="btn btn-default">Button</button>
<a href="###" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="Input"/>

注意事项有三点：

虽然按钮类可以应用到和元素上，但是，导航和导航条组件只支持元素。
链接被作为按钮使用时的注意事项如果元素被作为按钮使用 – 并用于在当前页面触发某些功能 – 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置 role=”button” 属性。
我们总结的最佳实践是：强烈建议尽可能使用元素来获得在各个浏览器上获得相匹配的绘制效果。

预订样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

btn-default ：默认样式
btn-success ：成功样式
btn-info ：一般信息样式
btn-warning ：警告样式
btn-danger：危险样式
btn-primary ：首选项样式
btn-link ：链接样式

<button class="btn btn-default">Button</button>
        <button class="btn btn-primary">Button</button>
        <button class="btn btn-success">Button</button>
        <button class="btn btn-info">Button</button>
        <button class="btn btn-warning">Button</button>
        <button class="btn btn-link">Button</button>
        <button class="btn btn-danger">Button</button>

尺寸大小

从大到小的尺寸

<p>
    <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
    <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
    <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
    <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
    <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
    <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
    <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

块级按钮

块级换行

<button class="btn  btn-block">Button</button>

激活状态

<button class="btn active">Button</button>

禁用状态

<button class="btn disabled">Button</button>

作业

使用HTML5中的定位服务获取位置信息

var $$ = jQuery.noConflict();

$$(function() {
	var current_lon_lat;
	var city_text;
	var weatherurl;
	var currMonth = new Date().getMonth() + 1;
	if(2 <= currMonth && currMonth <= 4) {
		$$('.weather-cover')[0].className += ' ' + 'weather-cover-spring';
	} else if(5 <= currMonth && currMonth <= 7) {
		$$('.weather-cover')[0].className += ' ' + 'weather-cover-summer';
	} else if(8 <= currMonth && currMonth <= 10) {
		$$('.weather-cover')[0].className += ' ' + 'weather-cover-autumn';
	} else {
		$$('.weather-cover')[0].className += ' ' + 'weather-cover-winter';
    }

    unit();
    function unit(){
        get_current_address();
    }
    /*下拉刷新方法*/
    mui.init({
        pullRefresh: {
            container: "#refreshContainer",
            down: {
                style: 'circle',
                //color: '#2BD009',
                //height: '50px',
                //range: '100px',
                //offset: '0px',
                callback: pull_refresh_method
            }
        }
    });
    /*通过百度地图浏览器定位当前位置信息*/
    function get_current_address(){
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                currentLat=r.point.lat;
                currentLon=r.point.lng;
                current_lon_lat=currentLon+','+currentLat;
                var pt=new BMap.Point(currentLon,currentLat);
                var geoc=new BMap.Geocoder();
                geoc.getLocation(pt,function(rs){
                    var addComp = rs.addressComponents;
                    //console.log(addComp);
                    var city=addComp.city;
                    city_text=city.slice(0,-1);
                });
                get_weather_data();
            }
        });
    }
    /*获取天气数据方法*/
    function get_weather_data() {
        weatherurl= "https://api.caiyunapp.com/v2/f34sfOwqSqhQ1LS4/"+current_lon_lat+"/forecast.jsonp";
        $$.ajax({
            url: weatherurl,
            type: 'GET',
            dataType: 'JSONP',
            async: false,
            success: function(data) {
                print_data(data);
            }
        });
    }

    function print_data(data) {
        $$('#weather-citynm').text(city_text);
		var current_temperature=data.result.hourly.temperature[0].value;
		var current_humidity=data.result.daily.humidity[0].avg;
		var wind_speed=data.result.daily.wind[0].avg.speed + 'km/h';
		var max_temperature=data.result.daily.temperature[0].max+'℃';
		var min_temperature=data.result.daily.temperature[0].min+'℃';
		$$('#weatherInfo-temperature_curr').text(current_temperature);
        $$('.weatherInfo-wind').text('风速');
		//$$('#weatherInfo-weather').text(data.result.daily.desc[0].value);
        $$('.weatherInfo-humidity').text(current_humidity);
		$$('#weatherInfo-winp').text(wind_speed);
        $$('#weatherInfo-temp_high').text(max_temperature);
		$$('#weatherInfo-temp_low').text(min_temperature);
    }
    /*下拉刷新执行方法*/
    function pull_refresh_method() {
        console.log('下拉刷新成功');
        get_current_address();
        close_pull_refresh_method();
    }
    /*关闭下拉刷新*/
    function close_pull_refresh_method() {
        mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
    }

});