bootstrap基础起步

一、进入bootstrap官网查看文档

     1. 中文文档：百度输入bootstrap即可搜索到中文官网；

     2. 英文文档：百度搜索get bootstrap 即可跳转到英文官网；

二、bootstrap的使用

      1. bootstrap依赖于jquery，所以我们必须先引入jQuery，再引入bootstrap；

      2. 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

      3. Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。

      4. Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。

      5. Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

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

三、bootstrap的常用标签

      1. body 标签：body 的默认字体样式为 "Helvetica Neue", Helvetica, Arial, sans-serif, 本的默认字体大小为 14 像素, 默认的行高度为 1.428571429, 默认的文本颜色为 #333333。

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

 

 

四、bootstrap的常用class属性值

      1. container 属性值： container class 用于包裹页面上的内容,  container 的左右外边距（margin-right、margin-left）交由浏览器决定,  由于内边距（padding）是固定宽度，默认情况下容器是不可嵌套的。

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

     2. container 属性值： container

 

1.small标签 副标题
2.lead 突出显示
3.mark 标签 文本内联元素，会有一个背景效果
4.text-left居左 text-right居右 text-center居中
5.text-uppercase 大写
6. text-capitalCase 首字母大写
7.text-lowercase 小写
8.abbr标签指定title属性为attribute 缩略语
9.address 地址标签
10.无样式列表 ul标签指定class为unstyled