Bootstrap笔记1

这篇博客介绍了如何开始使用Bootstrap,包括下载安装步骤和在HTML中引入CSS、JS文件。强调了Bootstrap的JS组件对jQuery的依赖。同时,详细解释了视口在移动浏览器中的作用,如何通过meta标签设置视口宽度,以及不同属性如initial-scale、user-scalable的含义。还提及了条件注释在移动Web开发中的应用和min-width判断条件的执行顺序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开始使用Bootstrap
下载安装:
在HTML中引入相应的CSS和JS文件
注意:Bootstrap的JS组件依赖于jQuery
Bootstrap文档:
http://v3.bootcss.com/ 中文网

视口的作用:
在移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示
目前大多数手机浏览器的视口(承载页面的容器)宽度都是980;
视口的宽度可以通过meta标签设置;
此属性为移动端页面视口设置,当前值表示在移动端页面的宽度为设备的宽度,并缩放(缩放级别为1)

width: 视口的宽度
initial-scale: 初始化缩放
user-scalable: 是否允许用户自行缩放(值:yes/no; 1/0)
minimun-scale: 最小缩放,一般设置了用户不允许缩放,就没必要设置最小和最大缩放
maximun-scale: 最大缩放

通常我们在移动Web开发时需要将Viewport设置为:

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

最终效果:网页中1px=真实的1px

条件注释的作用是当判断条件满足时,就会执行注释中的HTML代码,不满足时会当做注释忽略

<!--html5shiv让浏览器可以识别HTML5的新标签-->
<!--respond让低版本浏览器可以使用CSS3的媒体查询-->
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--自己写的文件默认放最下面-->
<link rel="stylesheet" href="css/main.css">

使用min-width作为判断条件一定要从小到大,其原因是CSS从上往下执行,如果是max-width一定是从大到小

		.container{
			width: 100%;
		}
        /*版心的宽度*/
        @media(min-width:1280px){
            /*这里的代码只有当(min-width: 1280px)满足时才会执行*/
            .container{
                width: 1280px;
            }
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值