bootstrap基础学习一篇

官网:http://www.bootcss.com/

这里,主要讲解bootstrap3。关于他的介绍就不用复述了。

1.示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <title>bootstrap-1</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.css">
    <link rel="stylesheet" href="../css/bootstrap-theme.min.css">
</head>
<body>
<h1>你好,世界!</h1>  

    <script src="../js/bootstrap.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>
</html>

a.先要下载,对应版本的bootstrap文件。

b.<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览,那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时,以 1:1 的比例呈现,不会有任何的缩放。

在移动设备浏览器上,通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放(zooming)功能。

通常情况下,maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

c.正确引用,css,js文件。

2.响应式图片

<img src="../img/a.jpg" class="img-responsive" alt="响应式图像" /> 

老版本:我们必须定义图片的width,height等。

我们现在看看 class=“img-responsive”的样式

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}

3.容器(container)

    <div class="container">
      ...
    </div>

看看class="container"的css样式

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
时间: 2024-10-24 17:21:48

bootstrap基础学习一篇的相关文章

bootstrap基础学习五篇

bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认的

bootstrap基础学习七篇

bootstrap图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-radius:500px 来让整个图片变成圆形. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框. a.代码如下: <img src="../img/b.jpg" class="img-responsive"

bootstrap基础学习八篇

bootstrap辅助类 a.对于文本颜色 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述 .text-muted "text-muted" 类的文本样式 .text-primary "text-primary" 类的文本样式 .text-success "text-success" 类的文本样式 .text-info "text-info" 类的文本样式 .text-warning &q

bootstrap基础学习三篇

bootstrap的排版 1.标题 Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式 2.代码如下: <div class="container"> <h1>我是标题1</h1> <h2>我是标题2</h2> <h3>我是标题3</h3> <h4>我是标题4</h4> <h5>我是标题5</h5> <h6>我是标题6&

bootstrap基础学习十一篇

bootstrap下拉菜单(Dropdowns) 下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可. a.代码示例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title> <li

bootstrap基础学习【表单含按钮】(二)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

bootstrap基础学习【菜单、按钮、导航】(四)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[菜单.按钮.导航](四)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.

【Bootstrap基础学习】00 序

其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQuery的一次再开发,所以jQuery脚本引用必须在bootstrap脚本之前. <link type="text/css" rel="stylesheet" href="./styles/bootstrap.min.css"/> <

Python基础学习 总结篇

Python基础学习总结 先附上所有的章节: Python学习(一)安装.环境配置及IDE推荐 Python学习(二)Python 简介 Python学习(三)流程控制 Python学习(四)数据结构(概要) Python学习(四)数据结构 —— int float Python学习(四)数据结构 —— str Python学习(四)数据结构 —— bool Python学习(四)数据结构 —— list tuple range Python学习(四)数据结构 —— set frozenset