本文介绍了如何下载及使用Bootstrap，包括导入CSS和JS文件的方法。讲解了基本布局容器、栅格系统及媒体查询的应用，同时展示了多种排版和样式的实现。
Bootstrap基础学习(一)
一.下载bootstrap
下载网址:https://v3.bootcss.com/getting-started/
这里有三个选项:
生产环境的bootstrap与bootstrap没有什么差别,区别在于生产环境的bootstrap是将源码压缩,去掉大部分的空格与无用的标点,减少代码占用空间,开发项目时多使用压缩版本的,如果想要知道bootstrap原理,推荐下载源码
我们这里下载压缩后的bootstrap
下载之后解压文件
开始使用bootstrap
我们已经下载并解压了bootstrap,现在要导入bootstrap
<!DOCTYPE html>
<html>
<head>
<title>first bootstrap</title>
<meta charset="utf-8">
<!-- 设置name属性为viewport(视口) 放大一倍 最多放大一倍 用户缩放:no(不可用)-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximun-scale=1,user-scalable=no">
<!--导入bootstrap css样式-->
<!--<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.css">-->
<!--导入bootstrap js样式,min版本是压缩版,去掉大部分空格,无用符号等-->
<!--<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->
<!--<script src="jquery-1.8.3.min.js"></script>-->
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
有两种方法导入(隔开了几行),不联网的时候,可以使用下载好的bootstrap,使用link标签与script标签导入,另一种即联网时直接使用源码的网址导入,而不是本地地址
< meta >标签上方meta标签的使用:bootstrap是移动设备优先,因此我们可以设置网页能否让用户缩放,在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕
bootstrap排版与链接
在bootstrap中已经设置了body的基本样式:
为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base 变量作为排版的基本参数;
为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线
这些都可以在导入的bootstrap.css文件中找到
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
<!-- 添加一个边框使效果更明显-->
<!-- 占据整个宽度的90%-->
<div class="container" style="border:1px solid red;" >
...
<div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
媒体查询
在bootstrap文档中对于媒体查询的介绍
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
可以判断浏览器宽度,并改变样式
简单的实例
<style>
/*最大宽度为500px时*/
@media (max-width:500px){
body{
background: red;
}
}
/*最小宽度为500时*/
@media (min-width:760px){
body{
background: skyblue;
}
}
</style>
在style样式中使用,参数介绍:
@media就是使用媒体查询,括号里使用了max-width(最大值),min-width(最小值)
实例中代码的意思就是:
当浏览器屏幕的宽度max-width最大为500px,也就是小于500px时,将body的背景颜色改成red红色, 而min-width最小值,也就是大于500px时,body的颜色改成skyblue天空蓝
** 屏幕宽度500px可以根据你的需求随意更改,没有要求**
超小屏幕（手机，小于 768px）
小屏幕（平板，大于等于 768px）
中等屏幕（桌面显示器，大于等于 992px）
大屏幕（大桌面显示器，大于等于 1200px）
类前缀:超小屏幕 col-xs
小屏幕 col-sm
中等屏幕 col-md
大屏幕 col-lg
栅格系统
系统自动将一行分为12列
<head>
/*将所有div设置边框和颜色,方便看效果*/
div{
border:1ps solid tellow;
}
</head>
<body>
<div class="container" style="border:1px solid yellow">
<!--class="row"设置为一行-->
<div class="row">
<!--前面说了,系统将一行分为12列,我们这里设置一行有四个div,
col-md意思是在中等屏幕下,-3指这个div占三行,不规定要用div,其他标签也可以-->
<!--下面的代码就是四个div,在中等屏幕宽度下,每个div占三列的宽度,一行总共四列-->
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
</body>
更多测试:
<div class="container" style="border:1px solid yellow">
<!--class="row"设置为一行-->
<!--下列代码:在中等屏幕下,每个div占三列,一行是四个div-->
<!--在小屏幕下,每个div占4列,即每行三个div-->
<!--在超小屏幕下,每个div占6列,一行就是两个div-->
<!--在最大屏幕下,每个div占2lie,一行可以放下六个div-->
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6 col-lg-2 "></div>
<div class="col-md-3 col-sm-4 col-xs-6 col-lg-2 "></div>
<div class="col-md-3 col-sm-4 col-xs-6 col-lg-2 "></div>
<div class="col-md-3 col-sm-4 col-xs-6 col-lg-2 "></div>
</div>
</div>
注意: 如果一行中,某个div占据了12列,那么其他的div会被挤到下面去
重置偏移
<div class="container">
<div class="row">
<div class="col-md-3">hello</div>
<!-- col-md-offset-6 在中等屏幕下向右偏移6列
在我的理解中就是在此div之前空出六列不用
在这后面的div如果超出12列，会被挤到下一行，前面空的6列是不使用的-->
<div class="col-md-3 col-md-offset-6">word</div>
</div>
</div>
嵌套列
<body>
<div class="container">
<div class="row">
<!--就是在当前行的一个列里面，创建新的一行,嵌套的一号不能超过12列-->
<div class="col-md-3">
<!--新的一行被分为12列-->
<div class="row">
<div class="col-md-3">hello word</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-6">word</div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
列排序
<div class="container">
<div class="row">
<!--关于push,pull-->
<!--push是将元素向后推,pull将元素往前拉-->
<div class="col-md-9 col-md-push-3" >hello</div>
<!--在中等屏幕宽度是,将此div向后推3列-->
<div class="col-md-3 col-md-pull-9">word</div>
<!--在中等屏幕宽度下,将此div向前移动9列-->
</div>
排版
- bootstrap对于< h1 >到< h6 >的标题标签都进行了美化,具体可自行使用
<div class="container">
<h1>hello word</h1>
<h2>hello word</h2>
<h3>hello word</h3>
<h4>hello word</h4>
<h5>hello word</h5>
<h6>hello word</h6>
</div>
- bootstrap有一些新的标签
<div class="container">
<!--bootstrap默认将页面文字设置为font-size:14px,行高line-hight:1.428-->
<!--<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）-->
<p>hello<mark>我是mark标签</mark> word</p> <!--背景高亮度显示-->
<ins>我是ins标签</ins><br> <!--额外插入的文本-->
<h1>我是h1标签</h1><small>我是small标签</small><br><!--small小号文本-->
<del> 我是del标签</del><br><!--删除标签,在文字上一条划线-->
<p>p标签</p>
<s>无用文本</s>
<u>带下划线的文本</u>
<em>斜体</em>
<p class="lead">中心重点</p> <!--使用.lead-->
<strong>强调一段文本</strong>
<p class="text-left">左对齐</p>
<p class="text-center">中间对齐</p>
<p class="text-right">右对齐</p>
<p class="text-justify">两端对齐</p>
<p class="text-nowrap">段落中超出屏幕部分不换行</p>
<p>这是<code><div></code>标签</p><!--code标签包裹,里面为代码-->
<p class="text-lowercase">Lowercased text. 小写</p>
<p class="text-uppercase">Uppercased text. 大写</p>
<p class="text-capitalize">Capitalized text. 首字母大写</p>
<abbr title="attribute is 666">语句缩略</abbr> <br><!--title就是缩略的全部语句-->
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr><!--为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。-->
<p>请按<kbd>Enter</kbd>确认</p><!--kbd标签:将标签里的内容改成键的样式-->
</div>
- 代码效果
还在学习过程,如果大家有问题欢迎一起讨论
扫一扫
85
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
