BootStrap--上

最新推荐文章于 2024-10-04 00:46:18 发布

独→白

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量180

点赞数

分类专栏：个人前端学习笔记文章标签：前端响应式 BootStrap

本文链接：https://blog.csdn.net/qq_43677445/article/details/90479816

版权

个人前端学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如何做网页手机适配
（1）声明viewport元标签

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

width=device-width:表示视口宽度是设备屏幕宽度
initial-scale=1.0：表示初始缩放比例
user-scalable=no：表示用户是否可以调整缩放比例
（2）使用流式布局

float:left;          
display:inline-block

（3）所有容器使用相对尺寸，不使用绝对尺寸

.container{
	/*width:1440px*/
	width:100%
}

（4）所有文字使用相对尺寸，不使用绝对尺寸

body{
	/*font-size:15px*/
	font-size:1.2em
}

（5）所有图片使用相对尺寸，不使用绝对尺寸

img{
	/*width:50px*/
	width:50%
}

（6）{最重要原则}使用CSS3 Media Query技术
Media指浏览器网页设备，如screen(PC/Phone/Pad),print
Media Query:查询出当前浏览网页的设备类型，以及特性
（如解析度，尺寸，对比度，手持方向等）
不同而有选择性的执行某些CSS代码，忽略另一些。
媒体查询两种使用方法：
（1）根据媒体查询结果执行外部CSS文件

 <link media="screen and(min-width:768px) and(max-width:991px)" rel="stylesheet" href="pad.css"/>

（2）根据媒体查询结果执行不同CSS片段

   @media screen and (min-width: 768px) and (max-width: 991px){
    .box{
        background: green;
        color: white;
        font-size: 20px
    }
}

Bootstrap第一步：起步
下载css/fonts/js

<html lang="zh-CN">

language:指当前网页所用自然语言：zh-CN(简体中文-中国)zh-hk/zh-tw/en-US/ja
作用有两个：为浏览器翻译功能确定基础语言，为读屏软件确定基础发音。

<meta http-equiv="X-UA-Compatible" content="IE=6">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

X-UA-Compatible:指定IE浏览器的兼容性指定–仅IE浏览器读取头信息。
IE=edge告诉IE使用最新的版本渲染网页
IE6 内核6
IE7 内核6/内核7
…

<!--[if It 9]>
	<script src="js/html5shiv.min.js"></script>
	<script src="js/respond.min.js"></script>
<![endif]-->

针对IE9以下浏览器
1：让老IE兼容HTML5新标签：header/footer/…
2：让老IE支持响应式网页–CSS3 Media Query
Bootstrap全局CSS样式–按钮
.btn 按钮基础样式
.btn-default 白底黑字按钮
.btn-danger/warning/success/info/promary五中颜色的按钮
.btn-lg/sm/xs按钮大小
.btn-block块级按钮
Bootstrap全局CSS样式–图片
.img-rounded圆角图片
.img-circle圆形图片
.img-thumbnail缩略图片（padding,边框）
.img-responsive响应图片
Bootstrap全局CSS样式–文本
.text-danger/success/warning/info/primary文字颜色
.bg-danger/success/warning/info/primary背景颜色
.text-left/center/right/justify对齐方式
.text-uppercase/lowercase/capitalize转换
Bootstrap全局CSS样式–列表
.list-unstyled去除提示符号
.list-inline行内列表
Bootstrap中屏幕分类
（1）大型PC屏幕（Large-lg）:w>1200px
（2）中等PC屏幕（Medium-md）:1200px>w>992px
（3）小型PAD屏幕（Small-sm）:992px>w>768px
（4）超小型PHONE屏幕（ExtraSmall-xs）:768px>w
Bootstrap全局CSS样式–表格
.table
.table-bordered带边框的表格
.table-striped隔行变色
.table-hover带悬停变色的表格
.table-responsive响应式表格（书写特殊）
Bootlint是Bootstrap官方检测HTML工具
栅格系统–重点&难点
网页布局可用的方法
（1）Table布局
好处：简单易控制
不足：语义错误，页面渲染效率低
（2）DIV+CSS布局
好处：语义正确，页面渲染速度快
不足：不容易控制
（3）Bootstrap的栅格布局系统
好处：简单易控制，渲染速度快，支持响应式
不足：没有
使用方法：
（1）最外层必须使用容器

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

（2）使用栅格

<div class="row"></div>

（3）列

<div class="col-lg/md/sm/xs"></div>

（4）适用性问题
.col-xs-*适用于xs/sm/md/lg屏幕
.col-sm-*适用于sm/md/lg屏幕
.col-md-*适用于ms/lg屏幕
.col-lg-*适用于lg屏幕
（5）一个列可以指定特定的屏幕下隐藏
.hidden-xs仅在xs屏幕下隐藏
.hidden-sm仅在sm屏幕下隐藏
.hidden-md仅在md屏幕下隐藏
.hidden-lg仅在lg屏幕下隐藏

（6）栅格系统可以嵌套，规则：列中再嵌入行，行中再有列
Bootstrap全局样式–表单（小难点）
Bootstrap提供三种形式表单
（1）默认表单

<form>
	<div class="form-group">
		<label class="control-label">用户名</label>
		<input class="form-control">
		<span class="help-block">6~8位数字</span>
	</div>
</form>

（2）行内表单

   <form class="form-inline">
   		<div class="form-group">
   			<label class="sr-only">用户名</label>
   			<input class="form-control">
   		</div>
   </form>

（3）水平表单

<form class="form-horizontal">
	<div class="form=group">
		<div class="col-*-*">
			<label class=""></label>
		</div>
		<div class="col-*-*">
			<input type="text">
		</div>
	</div>
</form>

bootstrap组件–下拉菜单
下拉菜单必须三级结构

<div class="dropdown">
	<a data-toggle="dropdown">触发元素</a>
	<div/ul class="dropdown-menu">隐藏元素</div/ul>
</div>

bootstrap组件–导航（还有一个导航条）
提示：Bootstrap中导航（nav）不同导航条（navbar）
（1）标签页式导航–页签组件

<ul class="nav nav-tabs">
	<li><a data-toggle="tab" href="#">十元套餐</a></li>
	<li class="active"><a data-toggle="tab" href="#">二十元套餐</a></li>
	<li><a data-toggle="tab" href="#">三十元套餐</a></li>
</ul>

（2）形式二胶囊式导航

<ul class="nav nav-pills">
        <li class="active"><a data-toggle="tab" href="#">十元套餐</a></li>
        <li><a data-toggle="tab" href="#">1元太惨</a></li>
        <li><a data-toggle="tab" href="#">5元套餐</a></li>
    </ul>

Bootstrap组件（导航条）–重点

<div class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Bootstrap</a>
            <a href="#" class="navbar-toggle">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
        </div>
        <div class="navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">新闻</a></li>
                <li><a href="#">首页</a></li>
                <li class="dropdown"><a href="#" data-toggle="dropdown">产品大全
                    <span class="caret"></span>
                </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">1111</a></li>
                        <li><a href="#">2222</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <a href="#" class="navbar-right navbar-link navbar-text">登录</a>
        <a href="#" class="navbar-right navbar-text">|</a>
        <a href="#" class="navbar-right btn btn-success navbar-btn">注册</a>
        <form action="#" class="navbar-right navbar-form">
            <div class="form-group">
                <label for="kw" class="sr-only">搜索</label>
                <input type="text" class="form-control" id="kw">
            </div>
        </form>
    </div>
</div>