bootstrap基础

评论 分享

Bootstrap 简介

Bootstrap 是 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
TA是完全开源的。它的代码托管、开发、维护都依赖 GitHub 平台。
Bootstrap中文网

Bootstrap 导入

使用 Bootstrap 提供的免费 CDN 加速服务（同时支持 http 和 https 协议,也就是文件地址http:// 或者 https://）

1
2
3
4
5
6
7
8
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

注意：以下3个meta标签必须放在head最前面，任何其他内容都必须跟随其后

1
2
3
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">   #系统如果安装ie8或以上版本，则使用最高版本ie渲染
<meta name="viewport" content="width=device-width, initial-scale=1">   #手机适配设置

Bootstrap 基础

1.全局样式

移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高,颜色
设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式

2.标题样式

(1)重置了h1~h6的默认样式
    重新设置了margin-top和margin-bottom的值，h1~h3重置后的值都是20px；h4~h6重置后的值都是10px
    所有标题的行高都是1.1（也就是font-size的1.1倍）
    文本颜色和字体都继承父元素的颜色和字体
    固定不同级别标题字体大小h1=36px、h2=30px、h3=24px、h4=18px、h5=14px、h6=12px
(2)标题类名：设置了名为 h1~h6 的类名，css样式与h1~h6一样；
    <div class="h1">Bootstrap标题</div>
(3)副标题 small 在h*标签或含h*类名的标签内使用：
    <h1>Bootstrap标题一<small>我是副标题</small></h1>

3.强调样式

(1)强调标签        
    <small>   #变小
    <strong> <b>    #加粗
    <em> <i>    #斜体
    <cite>
(2)强调使用的类名
    lead：一般配合段落标签使用 使其强调效果 （加粗，margib-bootom=20px,···)
    text-muted：提示，使用浅灰色（#999）
    text-primary：主要，使用蓝色（#428bca）
    text-success：成功，使用浅绿色(#3c763d)
    text-info：通知信息，使用浅蓝色（#31708f）
    text-warning：警告，使用黄色（#8a6d3b）
    text-danger：危险，使用褐色（#a94442）

4.对齐样式

对齐使用的类名
    text-left：左对齐
    text-center：居中对齐
    text-right：右对齐
    text-justify：两端对齐

5.列表样式

列表使用的类名    
    list-unstyled：    ul ol，去序列
    list-inline：ul ol 水平列表
        把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示
    dl-horizontal：dl 水平列表
        屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果

6.代码样式

<code>        一般是针对于单个单词或单个句子的代码
<pre>        一般是针对于多行代码（也就是成块的代码）
pre-scrollable        pre标签上添加的类名
    可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。

注意：不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码”& lt;”来替代，大于号(>)使用”& gt;”来替代