慕课网bootstrap笔记------1------

bootstrap的东西比较多，我感觉看了一遍慕课的东西，还是很多记不住，还是写个博客吧
链接在此

标题

• 在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。

<!--Bootstrap中的标题--><h1>Bootstrap标题一</h1><h2>Bootstrap标题二</h2><h3>Bootstrap标题三</h3><h4>Bootstrap标题四</h4><h5>Bootstrap标题五</h5><h6>Bootstrap标题六</h6><!--Bootstrap中让非标题元素和标题使用相同的样式--><h1>我的第一个bootstrap标题</h1><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>

• 这两个一样的

<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>

• 还有如上的操作，但是我试了一下，这个好像不能用div的class来处理。同理，这个还有 small 和strong一样，还有em，i这个是斜体。

• 如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。**这个其实就是一个类**class = “lead” 就好了

• 现在，还有一个是文本字体颜色。

<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>

• 文本对齐
  这个其实就是align = “center”,但是这个给封装到类里面了。

<p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">我两端对齐</p>

• 列表
  
  • 无序列表
    <ul>
<li>…</li>
</ul>

    这个可以加一个类名，去点列表，<ol class="list-unstyled">例子就是这样，下面的ol也可以的
  • 有序列表
    
<ol>
<li>…</li>
</ol>


<dl>
<dt>…</dt>
<dd>…</dd>
</dl>


• 还有内联列表，就是列表横着排布。就是为了导航栏而生的

  <ul class="list-inline"><li>W3cplus</li><li>Blog</li><li>CSS3</li><li>jQuery</li><li>PHP</li></ul>

  样式如下

  ---

  
  
  • W3cplus
  • Blog
  • CSS3
  • jQuery
  • PHP

• 定义列表，这个没做什么调整

<dl>    <dt>W3cplus</dt>    <dd>一个致力于推广国内前端行业的技术博客</dd>    <dt>慕课网</dt>    <dd>一个真心在做教育的网站</dd></dl>

---

这是样式

W3cplus

一个致力于推广国内前端行业的技术博客

慕课网

一个真心在做教育的网站

他其实也可以水平排布

<dl class="dl-horizontal">    <dt>W3cplus</dt>    <dd>一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文</dd>    <dt>慕课网</dt>    <dd>一个专业的，真心实意在做培训的网站</dd>    <dt>我来测试一个标题，我来测试一个标题</dt>    <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd></dl>

---

W3cplus

一个致力于推广国内前端行业的技术博客。它以探索为己任，不断活跃在行业技术最前沿，努力提供高质量前端技术博文

慕课网

一个专业的，真心实意在做培训的网站

我来测试一个标题，我来测试一个标题

我在写一个水平定义列表的效果，我在写一个水平定义列表的效果

此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1. 将dt设置了一个左浮动，并且设置了一个宽度为160px
2. 将dd设置一个margin-left的值为180px，达到水平的效果
3. 当标题宽度超过160px时，将会显示三个省略号

代码的样式

1. 使用<code></code>来显示单行内联代码
2. 使用<pre></pre>来显示多行块代码

3. 使用<kbd></kbd>来显示用户输入代码

   ---

   pre一般显示大的代码块，其中可以添加.pre-scrollable这个类，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
   可以通过修改这个来控制

   .pre-scrollable {max-height: 340px;overflow-y: scroll;}

   友情提示：如果您了解LESS或Sass这样的CSS预定定义处理器，你完全可以通过code.less或者_code.scss文件修改样式，然后重新编译，你就可以得到属于自己的代码样式风格。这个并不懂，以后还要好好看看。