Bootstrap 基础学习笔记（一）

排版

(1)标题

Bootstrap标题样式进行了以下显著的优化重置：

1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。

代码

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>标题（一）</title>

 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <!--Bootstrap中的标题-->

 <h1>Bootstrap标题一</h1>

 <h2>Bootstrap标题二</h2>

 <h3>Bootstrap标题三</h3>

 <h4>Bootstrap标题四</h4>

 <h5>Bootstrap标题五</h5>

 <h6>Bootstrap标题六</h6>

 <!--Bootstrap中让非标题元素和标题使用相同的样式-->

 <div class="h1">Bootstrap标题一</div>

 <div class="h2">Bootstrap标题二</div>

 <div class="h3">Bootstrap标题三</div>

 <div class="h4">Bootstrap标题四</div>

 <div class="h5">Bootstrap标题五</div>

 <div class="h6">Bootstrap标题六</div>

 <!--任务填写下方-->

 <h1>我的第一个bootstrap标题</h1>

 </body>

 </html>

显示效果为加了bootstrap自己样式的标题风格

(2)副标题

除此之外，我们在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果，使用了<small>标签来制作副标题。这个副标题具有其自己的一些独特样式：

1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于<small>内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；

代码样例

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>标题（二）</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <!--Bootstrap中使用了<small>标签来制作副标题-->

 <h1>Bootstrap标题一<small>我是副标题</small></h1>

 <h2>Bootstrap标题二<small>我是副标题</small></h2>

 <h3>Bootstrap标题三<small>我是副标题</small></h3>

 <h4>Bootstrap标题四<small>我是副标题</small></h4>

 <h5>Bootstrap标题五<small>我是副标题</small></h5>

 <h6>Bootstrap标题六<small>我是副标题</small></h6>

 <!--任务填写处-->

 <h1>孤儿院无私奉献30年  <small>一曲人性的赞歌</small></h1>

 </body>

 </html>

(3)正文段落

段落是排版中另一个重要元素之一。在Bootstrap中为文本设置了一个全局的文本样式（这里所说的文本是指正文文本）：

1、全局文本字号为14px(font-size)。

2、行高为1.42857143（line-height），大约是20px(大家看到一串的小数或许会有疑惑，其实他是通过LESS编译器计算出来的，当然Sass也有这样的功能)。

3、颜色为深灰色（#333）；

4、字体为"Helvetica Neue", Helvetica, Arial, sans-serif;（font-family），或许这样的字体对我们中文并不太合适，但在实际项目中，大家可以根据自己的需求进行重置，在此我们不做过多阐述，我们回到这里。该设置都定义在<body>元素上，由于这几个属性都是继承属性，所以Web页面中文本（包括段落p元素）如无重置都会具有这些样式效果

代码样例

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>段落（正文文本）</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>

 <p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>

 <p>我是一个段落，你猜我在Bootstrap是以什么样的风格显示。</p>

 </body>

 </html>

(3)强调相关的类

在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：

.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>强调相关的类</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <div class="text-muted">.text-muted 效果</div>

 <div class="text-primary">.text-primary效果</div>

 <div class="text-success">.text-success效果</div>

 <div class="text-info">.text-info效果</div>

 <div class="text-warning">.text-warning效果</div>

 <div class="text-danger">.text-danger效果</div>

 <p class="text-danger">我是一段危险信息，请用Bootstrap框架中的危险风格显示</p>

 </body>

 </html>

(4)文本对齐风格

在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑ 左对齐，取值left

☑ 居中对齐，取值center

☑ 右对齐，取值right

☑ 两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑   .text-left：左对齐

☑   .text-center：居中对齐

☑   .text-right：右对齐

☑   .text-justify：两端对齐
代码样例

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>文本对齐风格</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <p class="text-left">我居左</p>

 <p class="text-center">我居中</p>

 <p class="text-right">我居右</p>

 <p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. </p>

 <!--下面是任务部分-->

 <p>给我加个类，我就向右对齐。</p>

 </body>

 </html>

(5)列表--简介
Bootstrap根据平时的使用情形提供了六种形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去点列表

☑ 内联列表

☑ 描述列表

☑ 水平描述列表
代码样例

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>列表--简介</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <ul>

     <li>无序列表信息1</li>

     <li>无序列表信息2</li>

     <li>无序列表信息3</li>

 </ul>

 <ol>

     <li>有序列表信息1</li>

     <li>有序列表信息2</li>

     <li>有序列表信息3</li>

 </ol>

 <dl>

     <dt>定义列表标题</dt>

     <dd>定义列表信息1</dd>

     <dd>定义列表信息2</dd>

 </dl>

 </body>

 </html>

(6)去点列表
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>去点列表</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <!--无序列表去点-->

 <ul>

     <li>

     项目列表

         <ul>

         <li>带有项目符号</li>

         <li>带有项目符号</li>

         </ul>

     </li>

     <li>

     项目列表

         <ul class="list-unstyled">

         <li>不带项目符号</li>

         <li>不带项目符号</li>

         </ul>

     </li>

     <li>项目列表</li>

 </ul>

 <!--有序列表去序号-->

 <ol>

     <li>

     项目列表

         <ol>

         <li>带有项目编号</li>

         <li>带有项目编号</li>

         </ol>

     </li>

     <li>

     项目列表

         <ol class="list-unstyled">

         <li>不带项目编号</li>

         <li>不带项目编号</li>

         </ol>

     </li>

     <li>项目列表</li>

 </ol>

 </body>

 </html>

(7)内联列表

Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

代码示例

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>内联列表</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <ul class="list-inline">

     <li>W3cplus</li>

     <li>Blog</li>

     <li>CSS3</li>

     <li>jQuery</li>

     <li>PHP</li>

 </ul>

 </body>

 </html>

(8)定义列表

对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>定义列表</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 <dl>

     <dt>W双方各s</dt>

     <dd>帅哥哥是个啥地方撒范德萨发三个客</dd>

     <dt>哈哈</dt>

     <dd>少刚说过是否是个站</dd>

 </dl>

 </body>

 </html>

(8)代码

在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来：
1、LESS版本，请查阅code.less文件
2、Sass版本，请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行，由于代码太长，此处不一一列举。

在使用代码时，用户可以根据具体的需求来使用不同的类型：
1、<code>：一般是针对于单个单词或单个句子的代码
2、<pre>：一般是针对于多行代码（也就是成块的代码）
3、<kbd>:一般是表示用户要通过键盘输入的内容

代码样例

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta charset="utf-8">

 <title>代码</title>

 <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

 </head>

 <body>

 code风格：

 <div>Bootstrap的代码风格有三种：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>

 pre风格：

 <div>

 <pre>

 &lt;ul&gt;

 &lt;li&gt;...&lt;/li&gt;

 &lt;li&gt;...&lt;/li&gt;

 &lt;li&gt;...&lt;/li&gt;

 &lt;/ul&gt;

 </pre>

 </div>

 kbd风格：

 <div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

 </body>

 </html>

Bootstrap 基础学习笔记（一）的更多相关文章

【C#编程基础学习笔记】4---Convert类型转换
2013/7/24 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]4---Convert类型转换 ...
【C#编程基础学习笔记】6---变量的命名
2013/7/24 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com [C#编程基础学习笔记]6---变量的命名 ----- ...
1.C#基础学习笔记3---C#字符串（转义符和内存存储无关）
技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com ------------------------------------- ...
Java基础学习笔记总结
Java基础学习笔记一 Java介绍 Java基础学习笔记二 Java基础语法之变量.数据类型 Java基础学习笔记三 Java基础语法之流程控制语句.循环 Java基础学习笔记四 Java基础语法之 ...
Mysql数据库基础学习笔记
Mysql数据库基础学习笔记 1.mysql查看当前登录的账户名以及数据库一.单表查询 1.创建数据库yuzly,创建表fruits 创建表 ) ) ,) NOT NULL,PRIMARY KEY( ...
0003.5-20180422-自动化第四章-python基础学习笔记--脚本
0003.5-20180422-自动化第四章-python基础学习笔记--脚本 1-shopping """ v = [ {"name": " ...
Java基础学习笔记（一）
Java基础学习笔记(一) Hello World 基础代码学习代码编写基础结构 class :类,一个类即一个java代码,形成一个class文件,写于每个代码的前端(注意无大写字母) XxxYy ...
C#RabbitMQ基础学习笔记
RabbitMQ基础学习笔记(C#代码示例) 一.定义: MQ是MessageQueue,消息队列的简称(是流行的开源消息队列系统,利用erlang语言开发).MQ是一种应用程序对应用程序的通信方法. ...
handlebars.js基础学习笔记
最近在帮学校做个课程网站,就有人推荐用jquery+ajax+handlebars做网站前端,刚接触发现挺高大上的,于是就把一些基础学习笔记记录下来啦. 1.引用文件: jquery.js文件下载:h ...

随机推荐

windows server2012 r2 上IIS8.5
一时间不知道怎么开头了,直接上图吧! 开始时慢慢记录, 我记得第一次登陆到windows server 2012 r2 服务器时,有一些激动,兴奋,但马上就陷入不知所措的局面,之前完全没了解过 se ...
在Linux中永久设置Anaconda环境变量的方法
[感谢:http://www.codesec.net/view/459539.html] 如果在安装Anaconda的过程中没有将安装路径添加到系统环境变量中,需要在安装后手工添加: 1.在终端输入$ ...
mybatis配置优化
1.加入日志log4j 1)加入jar包:log4j-1.2.17.jar 2)加入log4j配置文件: 可以使properties或者xml形式 log4j.rootLogger = DEBUG,C ...
CRM 日期类型的一些处理JS
//当前日期 var now = new Date(); //换算为毫秒数 var now_ms = Date.UTC( now.getFullYear(), now.getMonth(),now.g ...
windows Server 2008 IE增强的安全配置关闭方法
解决方法开始->管理工具->服务器管理器
iframe中的js
iframe之间的js是不能相互访问的,iframe和父窗体之间的js也是不能相互访问的
PDF表单域(FormField)在HTML显示与提交数据到服务器
1.Adobe Arobat Pro等可以编辑表单域,只有几种控件: 2.展示PDF,可用PdfObject.js,Chrome自带? @{ViewBag.Title = @ViewBag.aaa;} ...
初学matlab----函数用法（随学习更新中）
sort(A) 若A是向量不管是列还是行向量,默认都是对A进行升序排列. sort(A)是默认的升序,而sort(A,'descend')是降序排序. sort(A)若A是矩阵,默认对A的各列进行升序 ...
HIVE 启动出错总结
1: [centos@centos4- bin]$ hive /home/centos/app/apache-hive--bin/bin/hive: line : /tmp/centos/stderr ...
Java、Android 开发环境搭建
一.准备工作为便于管理,将java开发工具集中到一个文件夹中.创建D:\javaDevE文件夹,JDK.Android-SDK.Eclipse.tomcat等都可以安装到这个文件夹中. 二.搭建Ja ...

Bootstrap 基础学习笔记（一）

Bootstrap 基础学习笔记（一）的更多相关文章

随机推荐

热门专题