Bootstrap笔记2

最新推荐文章于 2024-10-15 17:38:27 发布

原创最新推荐文章于 2024-10-15 17:38:27 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

Bootstrap

5 篇文章

订阅专栏

栅格系统
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。

简介：
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

工作原理：
（1）“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
（2）通过“行（row）”在水平方向创建一组“列（column）”。
（3）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为“行（row）”的直接子元素。
（4）类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
（5）通过为“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。通过.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉padding。
（6）负值的margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
（7）栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。
（8）如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

HTML约定
在head中引入必要的CSS文件，优先引用第三方CSS，方便自己的样式覆盖
在body末尾引入必要的JS文件，优先引用第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js依赖jQuery，那就应该先引用jQuery.js然后引用bootstrap.js

CSS约定
除了公共级别样式，其余样式全部由模块前缀
尽量使用直接子代选择器，少用简接子代，避免错杀

浏览器兼容模式

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

html中插入兼容模式设置，可以通过emmet meta: compat插入

favicon（站点图标）

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

html中插入图标链接，可以通过emmet link: favicon插入

引入相应的第三方文件

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="my.css">
...
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="my.js"></script>

在默认样式表中将默认字体设置为

        body{
            font-family: "Helvetica Neue", 
                        Helvetica,
                        Microsoft Yahei,
                        Hiragino Sans GB,
                        WenQuanYi Micro Hei,
                        sans-serif;
            
        }

构建顶部通栏

<header>
	<div class="topbar"></div>
</header>

container类
用于定义一个固定宽度且居中的版心

<div class="topbar">
	<div class="container">
		<!--
			此处代码会显示在一个固定宽度且居中的容器中
			该容器的宽度会随屏幕的变化而变化
		-->
	</div>
<div>

小屏幕隐藏

<div class="topbar hidden-xs hidden-sm"></div>

或者

<div class="topbar visible-md visible-lg"></div>

hidden-xx: 在某种屏幕下隐藏
visible-xx: 在某种屏幕尺寸下显示
+visible-xx-xx: 最后一个xx是决定显示时的display到底是啥