说明

作者: itachi | 来源:发表于2018-12-25 15:32 被阅读8次

Bootstrap包含的内容

基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
定制:您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。
在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。
通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。
注意,这种方式我们并不推荐所有网站使用,还是要看您自己的情况而定!

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
这表明相关的图像呈现为 block。当您把元素的 display 属性设置为 block,以块级元素显示。
设置 height:auto,相关元素的高度取决于浏览器。
设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。
如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center。

全局的显示,排版和链接

全局显示

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}

排版

使用 @font-family-base、 @font-size-base 和 @line-height-base 属性作为排版样式。

连接样式

a:hover,
a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}

容器

<div class="container">
...
</div>
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container:before,
.container:after {
display: table;
content: " ";
}

列排序

Bootstrap 网格系统另一个完美的特性,就是您可以很容易地以一种顺序编写列,然后以另一种顺序显示列。
您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序,其中 * 范围是从 1 到 11。
在下面的实例中,我们有两列布局,左列很窄,作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

相关文章

  • 说明~说明~

    咳咳 之前在斗觅的大号说这个号不用了 but! 这个号可以把我无聊的心思给大破,啊呸!打破! 打破! 打破! 打破...

  • 说明

    作者看了石头门之后突发奇想写的书,如果有特别雷同的部分,请QQ告诉我,我会后期修改

  • 说明

    截止到现在我的存稿就发完了,之后大概会在简书和起点同步更新。我尽量保证周更,但是最近比较忙估计会欠几更,等月底忙完...

  • 说明

    原本计划写的连载小说,不在简书上更新了,换了平台。貌似我写的不对简书口味

  • 说明

    这一文集记录自二模以来成绩,考后总结,吐槽

  • 说明

    这一个文集记录平时的学习感想,计划以及一些流水账

  • 说明

    最近在策划重大剧情,不久后将会迎来大更新

  • 说明

    目的:谨以此书献给自己,见证自己五年的成长。 如果能够给你一些思考或启发,那将是我的荣幸。 作者简介:潘诗音,一个...

  • 说明

    话说作者并没太监,这本小说还是会写下去的,不管有没有人看呐 血小板敬上

  • 说明

    家之外 给孩子一个温馨的港湾。 学校之外 给孩子一个轻松的课堂和您一样 外婆的学堂愿给孩子一个轻松又安全的成长...

网友评论

      本文标题:说明

      本文链接:https://www.haomeiwen.com/subject/rvfflqtx.html