Bootstrap学习(一)

一、准备所有资源

1、首先需要下载Bootstrap
Bootstrap学习(一)_第1张图片

2、下载jquery
Bootstrap学习(一)_第2张图片

  • Bootstrap下载地址:http://v3.bootcss.com/getting-started/#download
  • jquery下载地址:http://jquery.com/download/

二、代码部分:
1、根据设备显示页面的比例


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

initial-scale为缩放比例

2、引入文件

//引入样式
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
//引入jquery
<script src="bootstrap/js/jquery.min.js">script>
//js
<script src="bootstrap/js/bootstrap.min.js">script>

3、布局样式

--布局样式
container 固定宽度并且具有响应式
container-fluid自由宽高(100%)
-->
"container">

Downloading jQuery

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download a sourcemap file for use when debugging with a compressed file. The map file is not required for users to run jQuery, it just improves the developer's debugger experience. As of jQuery 1.11.0/2.1.0 the //# sourceMappingURL comment is not included in the compressed file. To locally download these files, right-click the link and select "Save as..." from the menu.

"container-fluid">

Downloading jQuery

"h1">行内块样式

Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download a sourcemap file for use when debugging with a compressed file. The map file is not required for users to run jQuery, it just improves the developer's debugger experience. As of jQuery 1.11.0/2.1.0 the //# sourceMappingURL comment is not included in the compressed file. To locally download these files, right-click the link and select "Save as..." from the menu.

  • 表格样式
<body style="padding: 50px;background-color: #ccc">
<div class="container" style="background-color: #fff;padding: 50px;">
    <h1> 表格 h1>
    <table class="table">
        <tr>
            <td>编号td>
            <td>新闻标题td>
            <td>发布者td>
            <td>发布时间td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
    table>
div>
body>

效果图:
Bootstrap学习(一)_第3张图片

表格的其他样式

  • 表格隔行变色
//表格隔行变色
class="table table-striped">

效果图:
Bootstrap学习(一)_第4张图片

  • 表格边框
//表格边框
class="table table-striped table-bordered">

效果图:
Bootstrap学习(一)_第5张图片

  • 表格鼠标放上或离开效果
class="table table-hover table-condensed">
  • 表格的自动滚动条

    <div class="table-responsive">
    <table class="table table-hover table-condensed">
        <tr class="active">
            <td>编号td>
            <td>新闻标题td>
            <td>发布者td>
            <td>发布时间td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
        <tr>
            <td> td>
            <td> td>
            <td> td>
            <td> td>
        tr>
    table>
    div>
  • 表格的样式

    <form class="form-inline">
        <div class="form-group">
            
            <label for="username" class="sr-only">用户名:label>
            <input type="text" class="form-control" id="username" placeholder="请输入您用户名">
        div>
        <div class="form-group">
            <label for="password">密码:label>
            <input type="text" class="form-control" id="password" placeholder="请输入您的密码">
        div>
    form>

Bootstrap 的基本的 HTML 模板:


<html>
   <head>
      <title>Bootstrap 模板title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js">script>
      <![endif]-->
   head>
   <body>
      <h1>Hello, world!h1>

      
      <script src="https://code.jquery.com/jquery.js">script>
      
      <script src="js/bootstrap.min.js">script>
   body>
html>

你可能感兴趣的:(Bootstrap基础)