济南做网站-bootstrap入门

2018-12-01 栏目:做网站知识 查看()

济南做网站



bootstrap在后台管理系统中使用较多,先前所做的几个项目也是使用的Bootstrap框架,不过并未系统学习过Bootstrap,近期工作没有那么忙了,于是计划系统地学习一下。

使用Bootstrap,首先要在官网下载bootstrap包,提供了多种方式的下载。

进入官网之后,进入下载页面,第一个是预编译版本下载,包括css,js,font。第二个是源码下载,需要自行编译。第三个是Sass版本,根据自己的需要,自行下载,此处,我们下载的是预编译版本,因为,暂时对less和sass还没有深入学习了解。

 

使用bootstrap创建的网页头部需要使用html5的文档类型(Doctype),否则可能会存在浏览器显示不一致的问题,甚至可能面临一些特定情况下的不一致,以至于代码不能通过W3C标准的验证。因此请使用如下的网页头部:

	<!DOCTYPE html>
	<html>
		....
	</html>
  bootstrap依赖于Jquery,所以在引入bootstrap.min.js之前,需要先引入jquery.js
为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签:    
<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 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。

<meta name="viewport" 
content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

全局显示

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

第一条规则设置 body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif。

第二条规则设置文本的默认字体大小为 14 像素。

第三条规则设置默认的行高度为 1.428571429。

第四条规则设置默认的文本颜色为 #333333。

最后一条规则设置默认的背景颜色为白色。

 

全局链接样式

通过属性 @link-color 设置全局链接的颜色。

以下是链接的默认样式:

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

容器(Container)

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

Bootstrap 3 的 container class 用于包裹页面上的内容。bootstrap.css 文件中的 .container class。

.container {
   padding-right:15px;
   padding-left:15px;
   margin-right:auto;
   margin-left:auto;}

通过上面的代码,把 container 的左右外边距(margin-right、margin-left)交由浏览器决定。

请注意,由于内边距(padding)是固定宽度,默认情况下容器是不可嵌套的。

.container:before,.container:after {
  display: table;
  content:" ";}

这会产生伪元素。设置 display 为 table,会创建一个匿名的 table-cell 和一个新的块格式化上下文。:before 伪元素防止上边距崩塌,:after 伪元素清除浮动。

如果 conteneditable 属性出现在 HTML 中,由于一些 Opera bug,围绕上述元素创建一个空格。这可以通过使用 content: " " 来修复。

.container:after {
  clear: both;}

它创建了一个伪元素,并确保了所有的容器包含所有的浮动元素。

Bootstrap 3 CSS 有一个申请响应的媒体查询,在不同的媒体查询阈值范围内都为 container 设置了max-width,用以匹配网格系统。

@media(min-width:768px){
.container {
      width:750px;
}

引入Bootstrap开始使用Bootstrap。关于bootstrap.min.js和bootstrap.js区别仅在于是否压缩,此处我们均引入压缩过会的

<!doctype html><html lang="en"><head><!--网站编码格式,UTF-8 国际编码,GBK或 gbgb2312 中文编码--><meta http-equiv="content-type" content="text/html;charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="Keywords" content="关键词一,关键词二"><meta name="Description" content="网站描述内容"><meta name="Author" content="Yvette Lau"><meta name = "viewport" content = " width = device-width, initial-scale = 1 "><title>CSSDemo</title><!--css js 文件的引入--><link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"/><script type="text/javascript" src="jquery-1.11.2.min.js"></script><script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script></head><body></body></html>
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

郑重申明:济南做网站公司以外的任何单位或个人,不得使用该案例作为工作成功展示!